angular入门基础教程(三)控制流之@if/@for

如果要在html实现条件判断，来动态的显示隐藏某个元素，或者是要显示一个列表数据，该怎么实现

条件判断-@if

• 当我们登录后，会有一个状态来记录登录状态，我们可以通过这个状态来控制页面上的一些元素是否显示。

<div class="user">
  @if(isLoggedIn){
  <p class="login-text">user-list works!</p>
  }@else{
  <div class="not-login">please login,boys</div>
  }
</div>

这里isLoggedIn就是我们的登录状态，当isLoggedIn为 true 时，我们显示login-text，颜色绿色，否则就显示not-login，红色字体

export class UserListComponent {
  isLoggedIn = true;
}

export class UserListComponent {
  isLoggedIn = false;
}

列表数据-@for

• @for 的用法，和 for 循环差不多。

userList = [
  {
    name: "张三",
    age: 18,
  },
  {
    name: "李四",
    age: 20,
  },
  {
    name: "王五",
    age: 21,
  },
  {
    name: "赵六",
    age: 20,
  },
  {
    name: "孙七",
    age: 21,
  },
  {
    name: "周八",
    age: 20,
  },
  {
    name: "吴九",
    age: 21,
  },
  {
    name: "郑十",
    age: 20,
  },
];

在页面显示这个列表,其中 track 是用来跟踪列表中每个元素的，当 track 的值发生改变时，就会重新渲染页面。track 必须写，否则会报错

<ul>
  @for(user of userList;track user.name){
  <li>{{user.name}} - {{user.age}}</li>
  }
</ul>