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

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

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 秒（在此之后同一页面上还有一些其他更新，他们都没有访问任何这些变量或其他东西）然后在控制台中它们仍然显示好的，但是在页面中它们都被选中了，为什么

此外，我注意到有 thounds 的控制台日志这个 = 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）上运行了它——它只使用了铬。

为什么

Answer 1

通常在 .html 中使用函数是个坏主意。我想你的permissionCategories 和permissionOfCategory 在表格改变时改变，那你可以在onTablesChanged 中管理。所以你可以使用这个函数来计算一个data对象数组的变量。每个对象都有两个属性：category和permissions（最后一个是一个数组）。所以：data:any[] //<--declare a variableonTablesChanged() {&nbsp; &nbsp; this.allRanks = Array.from(this.db.Tables.Rank.values());&nbsp; &nbsp; if (this.permissionsOfRank.length <= 0) {&nbsp; &nbsp; &nbsp; this.permissionsOfRank = Array.from(this.db.Tables.PermissionOfRank.values());&nbsp; &nbsp; }&nbsp; &nbsp; //here calculate data in the way&nbsp; &nbsp; data=this.permissionCategories().map(x=>({category:x,permissions:[]}))&nbsp; &nbsp; //data is an array ob object with "category" and "permissions"&nbsp; &nbsp; data.forEach(x=>{&nbsp; &nbsp; &nbsp; //with each element of data&nbsp; &nbsp; &nbsp; &nbsp;x.permissions=this.permissionsOfCategory(x.category)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //x.permisions is an array of Permision, but&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //you create an object with "permision", the Permision and "selected"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map(p=>({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;permission:p,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;selected:this.havePermission(x.category)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; }还有你的 .html<mat-selection-list>&nbsp; &nbsp; <ng-container *ngFor="let cat of data">&nbsp; &nbsp; &nbsp; &nbsp; <mat-divider></mat-divider>&nbsp; &nbsp; &nbsp; &nbsp; <!--use cat.category-->&nbsp; &nbsp; &nbsp; &nbsp; <div mat-subheader>{{ cat.category }}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--use cat.permissions-->&nbsp; &nbsp; &nbsp; &nbsp; <mat-list-option *ngFor="let permission of cat.permissions"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--use&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [selected]="permission.selected"&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ permission.permission.Name }}&nbsp; &nbsp; &nbsp; &nbsp; </mat-list-option>&nbsp; &nbsp; </ng-container></mat-selection-list>我希望不要错过太多（我不检查代码），但请记住：这个想法是一次性计算- 使用 map 将数组转换为对象数组（一个属性是数组，另一个属性是值计算）改为在 .html 中使用复杂函数