2

システム内のすべてのユーザーのリストを検討してください。

  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 変数にアクセスしてローカル変数として設定する簡単な方法はありますか?

ここに私がこれまで遊んできたもののプランカーがあります

4

4 に答える 4

4

ngFor テンプレート ディレクティブで変数を作成できますが、その変数はインデックス、偶数、奇数、および最後の値しか取得できません。

これが、カスタムgetUsers にusersList&を渡す必要がある場合にパイプを使用できる理由です(Angular1 のフィルターと同じように機能します)。allUsers@Pipe

マークアップ

<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;
  }
}

デモプランカー

于 2016-02-02T21:36:23.393 に答える
2

好き

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

それが私が使うものです。たとえば、パイプ/フィルターを作成するよりもはるかに簡単です。

ローカル テンプレート変数を使用して何かを行うことができたとしても、上記の HTML のように、リスト内のすべての項目、変更検出サイクルごとに再評価されると思います。

ng2: How to create variable in ngFor loopも参照してください。提案の 1 つは、子コンポーネントを作成し、getUser(userId)そのコンポーネントの入力プロパティに渡すことです。

于 2016-02-02T23:12:30.510 に答える