angular $implicit 作用

在Angular中，"$implicit"是一个特殊的标识符，用于在模板中引用默认的上下文对象。它通常与结构指令（例如ngFor或ngIf）一起使用。

当您在模板中使用结构指令时，您可以将一个值分配给一个变量，该变量将用于引用每个元素。例如，如果您使用*ngFor指令来迭代一个数组，您可以使用以下语法：

<ul>
  <li *ngFor="let user of users">
    {{ user.name }} ({{ user.email }})

    <ul *ngIf="user.roles; let roles = $implicit">
      <li *ngFor="let role of roles">
        {{ role }}
      </li>
    </ul>
  </li>
</ul>

 

在这个例子中，我们使用ngFor指令迭代一个用户数组，并将每个用户的名称和电子邮件显示在列表项中。如果用户有角色，则我们使用ngIf指令显示一个嵌套的无序列表，并将角色数组分配给"roles"变量。

在组件中，我们可以定义一个包含用户和角色信息的数据对象：

在这个例子中，用户数组包含三个对象，其中第一个和第三个对象都有一个名为"roles"的属性，其值为角色数组。我们在模板中使用ngIf指令来检查用户对象是否具有角色，如果有，则将角色数组分配给"$implicit"变量，以便在内部的ngFor循环中引用。

export class AppComponent {
  users = [   
     {      
    name: 'John Doe',     
    email: 'john@example.com',     
    roles: ['admin', 'editor']
    },
    {
      name: 'Jane Doe',
      email: 'jane@example.com'
    },
    {
      name: 'Bob Smith',
      email: 'bob@example.com',
      roles: ['viewer']
    }
  ];
}