angular渲染数组

angular渲染数组,*ngFor指令。

*ngFor指令演示

public arr:any[] = ['武汉','北京','上海','深圳']

<ul>
  <li *ngFor="let item of arr">{{item}}</li>
</ul>

public arrStu:any[] = [
    {
      name:'张三',
      age:'50'
    },
    {
      name:'李四',
      age:'30'
    },
    {
      name:'王五',
      age:'35'
    }
  ]
  
  <ul>
    <li *ngFor="let item of arr">{{item.name}}--{{item.sge}}</li>
  </ul>

复杂一点的数组处理

arrCars:any[]=[
    {
      cate:'宝马',
      list:[
        {
          title:'x1',
          monery:'$50w'
        },
        {
          title:'x2',
          monery:'$60w'
        },
      ]
    },
    {
      cate:'宝马2',
      list:[
        {
          title:'x5',
          monery:'$50w'
        },
        {
          title:'x6',
          monery:'$60w'
        },
      ]
    }
  ]
  
<ul>
  <li *ngFor="let item of arrCars">
      {{item.cate}}
    <div *ngFor="let items of item.list ">
        {{items.title}}
    </div>
  </li>
</ul>