Angular语法（一）——展示数据

双花括号{{}}

展示数据

title = 'Tour of Heroes';
myHero = 'Windstorm';

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

*ngFor

展示列表

heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

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

*ngIf

基于真/假条件插入或移除元素

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

Angular没有显示和隐藏信息。 它是从DOM中添加和删除段落元素。 这可以提高性能，特别是在大型项目中，当有条件地包含或排除大量的HTML与许多数据绑定时。