Angular 材料列表選項返回真，即使假

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真
訪問公民注冊表false
ArrestMandateCitizen false
更改公民電話號碼false
修改CitizenWanted false
ShowCitizenCrimeCount錯誤
AccessVehicleIndex假
SetVehicleAsStolen false
SetVehicleAsWanted false
SetVehicleAsFound false
SetVehicleNote false

每次我運行這個頁面時，一切都很完美，但是我等了 3 秒鍾（在這個時間之后，同一頁面上還有一些其他更新，他們都沒有訪問任何這些變量或其他東西），然后在控制台中它們仍然顯示好的，但是在頁面中它們都被選中了，為什么

此外，我注意到有 thounds 的控制台日志這個 = thounds of rerenders。

Rest 可能很重要的代碼：

  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 Angular 8.3.26 Typescript 3.5.3 @angular/material 8.2.3

我在 FiveM 應用程序（GTA V）上運行了它——它只使用了鉻。

為什么

Answer 1

通常在.html中使用function是個壞主意。 我想你的permissionCategories 和permissionOfCategory 會在表格發生變化時發生變化，那你可以在onTablesChanged 中進行管理。 所以你可以使用這個 function 來計算一個變量data ，它是一個 object 的數組。 每個 object 都有兩個屬性： 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 將數組轉換為對象數組（一個屬性是數組，另一個屬性是值計算）代替使用復數 function 中的.html