*ngFor 和 *ngIf 简单使用 - Angular

首先，需要初始化一个数组用来后续执行循环的操作

export class YHChildComponent implements OnInit {
  @Input()

  userInfoZS = {
    name: '张三',
    content: 'xxxxxx'
  };
  userInfoLS = {
    name: '李四',
    content: 'xxxxxx'
  };
  userInfoZL = {
    name: '赵六',
    content: 'xxxxxx'
  };

  userInfos = [this.userInfoZS, this.userInfoLS, this.userInfoZL];

  constructor() {
  }

  ngOnInit() {
  }
}

其次，在模板(html)中通过 *ngFor 来遍历上面创建的数组，输入其所需的内容

<!--方式一-->
<ul>
  <li *ngFor="let obj of userInfos">
    <p>{{obj.name}}{{obj.content}}</p>
  </li>
</ul>

<!--方式二-->
<ul>
  <li *ngFor="let obj of userInfos; let i = index">
    <span>Object name is:{{obj.name}}</span>
    <span *ngIf="obj.name == '李四'">{{obj.content}}</span>
  </li>
</ul>

最后，在页面中查看输出的内容即可