我有一个问题。我的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
>
就像您看到的一样,我具有相同的按钮,分别带有href
和matBadge
。显示的内容取决于cuurentUserRole
。
我的问题是,如何通过这两个按钮使带有正确编码的*ngIf
条件的按钮改变我想要的内容?有可能吗?
答案 0 :(得分:2)
尝试以下示例
在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>