Angular 材质列表选项返回 true，即使为 false答案

【问题标题】：Angular Material List Option returns true, even if falseAngular 材质列表选项返回 true，即使为 false
【发布时间】：2020-07-01 18:15:53
【问题描述】：

<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 返回真假

UseLspdTablet 真
ModifyRanks 真
AccessCitizenIndex 真
AccessCitizenRegistry 假
ArrestMandateCitizen 错误
ChangeCitizenPhoneNumber false
修改CitizenWanted false
ShowCitizenCrimeCount 错误
AccessVehicleIndex 假
SetVehicleAsStolen 假
SetVehicleAsWanted 假
SetVehicleAsFound 假
SetVehicleNote false

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

我还注意到有 thounds of this = thounds of rerenders 的控制台日志。

其余可能很重要的代码：

  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 个调用，为什么

Windows 10 角 8.3.26 打字稿 3.5.3 @角/材料8.2.3

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

为什么

【问题讨论】：

你在哪里打电话给onTablesChanged？

标签： javascript angular typescript angular-material logic

【解决方案1】：

通常在 .html 中使用函数是个坏主意。我想你的permissionCategories 和permissionOfCategory 会在表格发生变化时发生变化，那你可以在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 中的复杂函数

【讨论】：