组件与模板 显示数据

Posted 2021-01-05 andychen2015

在 Angular 中最典型的数据显示方式，就是把 html 模板中的控件绑定到 Angular 组件的属性。

• 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性。

• 用 ngFor 显示数组。

• 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性。

• 用 ngIf 根据一个布尔表达式有条件地显示一段 HTML。

1) 使用插值表达式显示组件属性

通过{{ expression }} 来绑定组件属性，放进视图模板，进而显示组件的属性。

注意，你没有调用 new 来创建 AppComponent 类的实例，是 Angular 替你创建了它。那么它是如何创建的呢？

注意： @Component 装饰器中指定的 CSS 选择器 selector，它指定了一个叫 <app-root> 的元素。 该元素是 index.html文件里的一个占位符。

当你通过 main.ts 中的 AppComponent 类启动时，Angular 在 index.html 中查找一个 <app-root> 元素， 然后实例化一个 AppComponent，并将其渲染到 <app-root> 标签中。

2) 内联 (inline) 模板还是模板文件？

两种地方存放组件模板： 

• 你可以使用 template 属性把它定义为内联的，模板是包在反引号 (`) 中的一个多行字符串。

 

template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
  `

•  把模板定义在一个独立的 HTML 文件中， 再通过 @Component 装饰器中的 templateUrl 属性， 在组件元数据中把它链接到组件。

3) 使用“迭代”指令 ngFor 显示数组属性

　不要忘记 *ngFor 中的前导星号 (*)。它是语法中不可或缺的一部分。

  ngFor 可以为任何可迭代的 (iterable) 对象重复渲染条目。

<li *ngFor="let hero of heroes">
  {{ hero }}
</li>

4) 通过 NgIf 进行条件显示

应用需要只在特定情况下显示视图或视图的一部分。

Angular 的 ngIf 指令会根据一个布尔条件来显示或移除一个元素。

Angular 并不是在显示和隐藏这条消息，它是在从 DOM 中添加和移除这个段落元素。

<p *ngIf="heroes.length > 3">There are many heroes!</p>