Angular2：表示* ngFor

Question

私は例

["A", "B", "C", "D", "E"] 
[1, 2, 3, 4, 5] 

のための2つの配列を持っていると逆にキーと値のペアとして2つのアレイにはどうすればこれらは* ngForを使用して逆の順序でキーと値のペアとして表示していますか？ E：5 D：4 ......

Answer 1

* ngForのインデックス構文を使用します。 * ngForのdocumentです。 そして、配列arrayにはarray.reverseを使用することを忘れないでください。

<div *ngFor="let item of testArray; let i = index"> 
    {{ testArray[i] }} : {{ testArray2[i] }} 
</div> 

Answer 2

2つの配列を取り、ソートされたキー値のペアの配列を返すコンポーネント関数を作成してみてください。あなたの関数にチェックをすべての基本的なエラーを行い、その後、単純に次のようなあなたのビューで関数を呼び出す：

*ngFor="let keypair of getKeyPairs(charArray, intArray)" 

angular1からソートのパイプがそのように自分自身をソートすることを実装する必要があります、角2から削除されました。

Answer 3

あなたは値を逆にするArray.prototype.reverse()方法を使用することを行うことができ、その後、あなたは次のようにそれを得ることができます。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <ul> 
     <li *ngFor="let str of strArr; let i=index">{{str}} : {{numArr[i]}}</li> 
    </ul> 
    `, 
}) 
export class App { 
    strArr: Array<string> = ["A", "B", "C", "D", "E"]; 
    numArr: Array<number> = [1, 2, 3, 4, 5]; 

    constructor() { 
    this.strArr.reverse(); // reverse the values ["E", "D", "C", "B", "A"] 
    this.numArr.reverse(); // reverse the values [5, 4, 3, 2, 1] 
    } 
} 

Demo @Plnkr