你如何在 Angular2 中對 NgFor 的結果運行一個函數？

Question

考慮系統中所有用戶的列表：

  allUsers = {
    a: {name:'Adam',email:'adam@testco.com',level:'admin',group:'Owners'},
    b: {name:'Barbra',email:'Barbra@testco.com',level:'admin',group:'Owners'},
    c: {name:'Chris',email:'Chris@otherplace.net',level:'standard',group:'Managers'},
    d: {name:'Dennis',email:'dsmolek@showman.com',level:'standard',group:'Managers'},
    e: {name:'Elizabeth',email:'eadams@testco.com',level:'standard',group:'Staff'},
    f: {name:'fred',email:'fred@testco.com',level:'visitor',group:'Visitor'},

  }

然后是項目中的用戶列表：

usersList = ['a','b','d','f'];

所以你有一個很好的簡單函數來獲取用戶 id 並查找其余的用戶詳細信息：

  getUser(userId){
    console.log('Getting User with Id:', userId);
    if(allUsers[userId]) return allUsers[userId];
  }

然后在模板中使用 *ngFor 循環遍歷列表中的用戶，但您想查找完整的詳細信息集

<tr *ngFor="#userId in usersList" #user="getUser(userId)">
  <td>{{user.name}}</td>
</tr>

不起作用......如果不創建自定義組件或其他更復雜的東西，我無法弄清楚如何為每個用戶運行一次 getUser 函數。 我當然可以一遍又一遍地運行它：

<td>{{getUser(userId).name}}</td>

但這似乎不是最好的方法。 有沒有更簡單的方法來訪問 userId 變量並將其設置為局部變量？

這是迄今為止我一直在玩的東西

Answer 1

雖然您可以在 ngFor 模板指令上創建一個變量，但該變量只能采用索引、偶數、奇數和最后的值。

這就是為什么我可以在這種情況下使用管道的原因，在這種情況下，您需要將usersList和allUsers傳遞給自定義@Pipe getUsers（它將與allUsers中的過濾器相同）。

標記

<tr *ngFor="let user of usersList | getUsers: allUsers">
  <td>
    {{user.name}}
  </td>
  <td>
    {{user.email}}
  </td>
  <td>
    {{user.level}}
  </td>
  <td>
    {{user.group}}
  </td>
</tr>

代碼

@Pipe({
  name: 'getUsers',
  pure: false
})
export class GetUserPipe implements PipeTransform {
  constructor(){
    this.test = 'Test';
  }
  transform(array:Array<string>, object: any) : any {
    // for..in loop
    let output = [];
    for (var num in array)
    {
      // somehow object goes inner side
      output.push(object[0][array[num]]);
    }
    console.log(output)
    return output;
  }
}

演示 Plunkr

Answer 2

我喜歡

<td>{{getUser(userId).name}}</td>

那就是我會用的。 這比創建管道/過濾器要容易得多。

即使您可以使用本地模板變量做一些事情，我相信它會為列表中的每個項目、每個更改檢測周期重新評估，就像上面顯示的 HTML 一樣。

另請參閱ng2: How to create variable in ngFor loop ，其中一個建議是創建子組件，並將getUser(userId)傳遞給該組件的輸入屬性。

Answer 3

你可以有你的標記如下

<tr *ngFor="theUser in getTheUsers(usersList)" >
   <td>{{theUser.name}}</td>
</tr>

getTheUsers()函數應該是這樣的

getTheUsers(usersList:string[]){
  return usersList.map(user=> this.allUsers[user]); 
}

Answer 4

另請參閱我使用 ng-container、*ngIf 和 let 的替代方法。 雖然不理想，但您不需要創建子組件。 基本上， *ngIf 的表達式創建了一個對象（因此 *ngIf 始終是完整的，因此始終呈現內容）並且對象上的屬性包含計算值。 該對象被分配給局部變量（使用 *ngIf 的 let 語法）。