「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」

鼠标悬停进行提示title属性

title属性

title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。参考链接：菜鸟教程 title属性 & W3shcool title属性

HTML使用

这里的title内容只能写死

<div title="测试">  html </div>

angular使用

angular可以通过<标签 [title]="变量名"></标签>这种语法达到动态修改title的效果。

文件：home.component.html

代码：

<div [title]="student">
  <p>小茗同学</p>
  <hr>
</div>

文件：home.component.ts

代码：

public student:string = "student！"

0VNJL{Q3HM026E7$$COMR5T.jpg

页面解析

public htmlContent:string = "<h2>这是h2标签</h2>"

对于变量用以下代码无法解析成dom元素，只能解析成字符串

<div>{{htmlContent}}</div>

用以下代码则可以解析成功

<span [innerHTML]="htmlContent"></span>

出于好奇进行验证了以下是只能span元素还是任意HTML元素，结果发现用其他元素解析效果不好，这里除了p标签以外其他标签都会有自己特色。个人感觉这个解析后的dom标签不会影响原有标签。

<p [innerHTML]="htmlContent"></p>
<h1 [innerHTML]="htmlContent"></h1>
<textarea [innerHTML]="htmlContent"></textarea>

angular模板允许做简单运算

<div>
    <h1>angular模板运行简单运算</h1>
    <p>1+3={{1+3}}</p>
</div>

angular遍历数组*ngFor

数组定义：

  public arr:string[] = [
    '1.我不是枪神',
    '2.长津湖',
    '3.这个杀手不太冷',
    '4.熊出没',
    '5.不要忘记我爱你',
  ];

HTML代码：

<div>
    <h1>数据循环</h1>
    <ul>
        <li *ngFor="let item of arr" class="ulli">{{item}}</li>
    </ul>
</div>

效果展示：

如果数组里面有对象，对象里面有数组，数组里面有属性，如图所示的这种树形结构，代码可以这样写：

  <ul>
    <li *ngFor="let item of car" class="ulli">
      <h3>{{item.brand}}</h3>
      <p *ngFor="let itemCar of item.series">
        {{itemCar.name}} --- {{itemCar.price}}
      </p>
    </li>
  </ul>

运行效果展示图：

angular数据绑定