Angular 数据循环

.html

<h1>angular里面的数据循环</h1>
<ul>
   <li *ngFor="let item of arr">
       {{item}}
   </li>
</ul>

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

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

<ul>
   <li *ngFor="let item of userList">
       {{item.name}}--{{item.age}}
   </li>
</ul>

<ul>
   <li *ngFor="let item of cars">
       <h2>{{item.cate}}</h2>
       <ol>
           <li *ngFor="let car of item.list">
               {{car.title}}--{{car.price}}
           </li>
       </ol>
   </li>
</ul>

.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-news',
 templateUrl: './news.component.html',
 styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
 //定义数组
 arr=['111','222','333']

 public list:any[]=['我是一个帅哥','我是一个明星','我是一个冒险家'];

 public items:Array<string>=['科比','詹姆斯','杜兰特'];

 public userList:any[]=[{
   name:'张三',
   age:20
 },{
   name:'李四',
   age:30
 },{
   name:'王二',
   age:40
 }];

 public cars:any[]=[
   {
     cate:'宝马',
     list:[{
       title:'宝马x1',
       price:'40W'
     },
     {
       title:'宝马x2',
       price:'45W'
     },
     {
       title:'宝马x3',
       price:'46W'
     }
     ],
   },
   {
     cate:'奥迪',
     list:[{
       title:'奥迪x1',
       price:'40W'
     },
     {
       title:'奥迪x2',
       price:'41W'
     },
     {
       title:'奥迪x3',
       price:'409'
     }
     ],
   }
 ]

 constructor() { }

 ngOnInit(): void {
 }
}