如何显示文本跟随角色？

Question

我想随着函数的编写在编辑页面显示文本的标题

app.html

<div class="header content">
      <h5 *ngIf="getRoleEditPage()">
        <i class="fas fa-edit"></i>
          {{ text }}
      </h5>
</div>

app.ts

  getRoleEditPage() {
    let text: string
    if (this.user.roles.customer === true) {
      text = `Customer's Edit Ticket`
    } else if (this.user.roles.supporter === true) {
      text = `Supporter's Edit Ticket`
    } else if (this.user.roles.maintenance === true) {
      text = `Maintenance's Edit Ticket`
    } else if (this.user.roles.supervisor === true) {
      text = `Supervisor's Edit Ticket`
    } else if (this.user.roles.developer === true) {
      text = `Developer's Edit Ticket`
    }
    return text
  }

Answer 1

您需要绑定 getRoleEditPage 的结果，如下所示（使用别名）：

<div class="header content">
      <h5 *ngIf="getRoleEditPage() as text">
        <i class="fas fa-edit"></i>
          {{ text }}
      </h5>
</div>

Answer 2

为此，您需要在方法外将 text 声明为 class 的属性，然后在方法内分配 text 的内容。

Answer 3

最好的方法是在这里使用管道 :-

<div class="header content">
      <h5>
        <i class="fas fa-edit"></i>
          {{ user | rolePipe }}
      </h5>
</div>

@Pipe({name: 'rolePipe'})
export class RolePipe implements PipeTransform {
  transform(user: any, args: any) {
    if (this.user.roles.customer === true) {
      return `Customer's Edit Ticket`
    } else if (this.user.roles.supporter === true) {
      return `Supporter's Edit Ticket`
    } else if (this.user.roles.maintenance === true) {
      return `Maintenance's Edit Ticket`
    } else if (this.user.roles.supervisor === true) {
      return `Supervisor's Edit Ticket`
    } else if (this.user.roles.developer === true) {
      return `Developer's Edit Ticket`
    }
    return;
  }
}

如何显示文本跟随角色？

How to display text follow role?

angular

angular8