Angular2 * ng如果以優雅的方式更改值

Question

我有個問題。 我的html看起來像這樣：

 <a href="/admin/companies" mat-button *ngIf="currentUserRole == 'Admin'" > <mat-icon matBadge="A" >business</mat-icon > Companies</a > <a href="/companies" mat-button *ngIf="currentUserRole == 'Employer'"> <mat-icon matBadge="E" >business</mat-icon > Companies</a > 

如您所見，我具有matBadge href和matBadge的相同按鈕。 顯示的內容取決於cuurentUserRole 。

我的問題是，如何通過這兩個按鈕使一個帶有正確編碼的*ngIf條件更改我想要的內容？ 可能嗎？

Answer 1

試試這個例子

在ts中，從'@ angular / core'導入{Component}；

@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrls: ['button-overview-example.css'],
})
export class ButtonOverviewExample {
  currentUserRole : string = "Admin"
  roles = [{"url":"/admin/companies","id":"Admin","bid":"A","title":"Companies"},{"url":"/companies","id":"Employer","bid":"E","title":"Employee"}]
}

在HTML

<div *ngFor="let role of roles">
<a 
    [href]="role.url"
    mat-button
    *ngIf="currentUserRole == role.id"
  >
    <mat-icon
      [matBadge]="role.bid"
      >business</mat-icon
    >
    {{role.title}}</a
  >
  </div>