Angular Material 列表选项 returns 为真，即使为假

Question

<mat-selection-list>
    <ng-container *ngFor="let cat of permissionCategories()">
        <mat-divider></mat-divider>
        <div mat-subheader>{{ cat }}</div>
        <mat-list-option *ngFor="let permission of permissionsOfCategory(cat)"
            [selected]="havePermission(permission)"
        >
            {{ permission.Name }}
        </mat-list-option>
    </ng-container>
</mat-selection-list>

和

havePermission(permission: Permission): boolean {
    return this.currentRankPermissions.includes(permission.Id);
}

我检查了一百次所有的值，它们都是正确的还有一些权限和 havePermission returns true or false

UseLspdTablet true
ModifyRanks true
AccessCitizenIndex true
AccessCitizenRegistry false
ArrestMandateCitizen false
ChangeCitizenPhoneNumber false
ModifyCitizenWanted false
ShowCitizenCrimeCount false
AccessVehicleIndex false
SetVehicleAsStolen false
SetVehicleAsWanted false
SetVehicleAsFound false
SetVehicleNote false

每次我运行这个页面，一切正常，但我等了 3 秒（这段时间之后同一页面上有一些其他更新，none他们中的任何一个都在访问任何这个变量或其他东西)，然后在控制台中他们仍然显示正常，但在页面中他们都被选中，WHY

我还注意到有数以千计的控制台日志 = 数以千计的重新渲染。

其余可能重要的代码：

  onTablesChanged() {
    this.allRanks = Array.from(this.db.Tables.Rank.values());

    if (this.permissionsOfRank.length <= 0) {
      this.permissionsOfRank = Array.from(this.db.Tables.PermissionOfRank.values());
    }
  }

  permissionCategories(): string[] {
    const res = [];
    Array.from(this.db.Tables.Permission.values()).forEach((permission: Permission) => {
      if (!res.includes(permission.Category)) {
        res.push(permission.Category);
      }
    });

    return res;
  }

  permissionsOfCategory(cat: string): Permission[] {
    return Array.from(this.db.Tables.Permission.values())
      .filter(c => c.Category === cat);
  }

每 3 秒调用一次 onTablesChanged，这会导致重新渲染，但它应该会导致 13 次调用 havePermission，但会导致其中的 99999999 次，WHY

Windows 10 Angular 8.3.26 打字稿 3.5.3 @angular/material 8.2.3

我在 FiveM 应用程序 (GTA V) 上运行 - 它只使用铬。

为什么

Answer 1

一般在.html中使用一个函数是个坏主意。我想您的 permissionCategories 和 permissionsOfCategory 在表更改时会更改，您可以在 onTablesChanged 中进行管理。所以你可以使用这个函数来计算一个变量data，它是一个对象数组。每个对象都有两个属性：category 和 permissions（最后一个是数组）。所以：

data:any[] //<--declare a variable
onTablesChanged() {
    this.allRanks = Array.from(this.db.Tables.Rank.values());

    if (this.permissionsOfRank.length <= 0) {
      this.permissionsOfRank = Array.from(this.db.Tables.PermissionOfRank.values());
    }
    //here calculate data in the way
    data=this.permissionCategories().map(x=>({category:x,permissions:[]}))
    //data is an array ob object with "category" and "permissions"
    data.forEach(x=>{
      //with each element of data
       x.permissions=this.permissionsOfCategory(x.category)
          //x.permisions is an array of Permision, but 
          //you create an object with "permision", the Permision and "selected"
          .map(p=>({
               permission:p,
               selected:this.havePermission(x.category)
          })
    })
  }

还有你的.html

<mat-selection-list>
    <ng-container *ngFor="let cat of data">
        <mat-divider></mat-divider>
        <!--use cat.category-->
        <div mat-subheader>{{ cat.category }}</div>
                <!--use cat.permissions-->
        <mat-list-option *ngFor="let permission of cat.permissions"
            <!--use 
            [selected]="permission.selected"
        >
            {{ permission.permission.Name }}
        </mat-list-option>
    </ng-container>
</mat-selection-list>

我希望不要错过太多（我不检查代码），但请记住：这个想法是计算所有一次 - 使用 map 转换数组在对象数组中（一个属性数组和另一个属性计算值）而不是在 .html

中使用复杂函数

Angular Material 列表选项 returns 为真，即使为假

Angular Material List Option returns true, even if false

javascript

logic

typescript

angular-material

angular