配列の最初の行とそれに続くangular2の次の行を表示する方法

Question

特定の行に配列の最初の行だけを表示し、残りの配列を別の場所に表示することはできますか？新しいテーブルまたはカード）。

例えば、私は、次のデータがあります。

public records = [{ 
    firstName: "Joe", 
    lastName: "Smith", 
    favBooks: [ "1984", "Animal Farm", "Lord of the Rings", "Where the Sidewalk Ends"] 
}, 
{ 
    firstName: "Jane", 
    lastName: "Jameson", 
    favBooks: [ "Harry Potter", "Ender's Game", "Chronicles of Narnia" 
}, 
{ 
    firstName: "Sam", 
    lastName: "Baker", 
    favBooks: "The Pelican Brief" 
}] 

をそして、私は次のように出力を表示する：ここで

tr.even { 
 
    background-color: #C9D4D9; 
 
} 
 
th#accordian-icon 
 
td[name="accordian-icon"] 
 
{ 
 
    width: 15px; 
 
} 
 
th#person-name 
 
td[name="person-name"] 
 
{ 
 
    width: 250px; 
 
} 
 
th#fav-book 
 
td[name="fav-book"] 
 
{ 
 
    width: 250px; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
    <th id="accordion-icon"></th> 
 
    <th id="person-name">Name</th> 
 
    <th id="fav-book">Favorite Book(s)</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td name="accordion-icon">+</td> 
 
    <td name="person-name">Joe Smith</td> 
 
    <td name="fav-book">1984</td> 
 
    </tr> 
 
    <tr class="even"> 
 
    <td name="accordian-icon">-</td> 
 
    <td name="person-name">Jane Jameson</td> 
 
    <td name="fav-book">Harry Potter</td> 
 
    </tr> 
 
    <tr class="even"> 
 
    <td name="accordian-icon"></td> 
 
    <td name="person-name"></td> 
 
    <td name="fav-book">Ender's Game</td> 
 
    </tr> 
 
    <tr class="even"> 
 
    <td name="accordian-icon"></td> 
 
    <td name="person-name"></td> 
 
    <td name="fav-book">Chronicles of Narnia</td> 
 
    </tr> 
 
    <tr class=""> 
 
    <td name="accordian-icon"></td> 
 
    <td name="person-name">Sam Baker</td> 
 
    <td name="fav-book">The Pelican Brief</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

は、私がこれまで持っているものです（accordionToggleはアイコン名）：

私がいる

問題は、次のとおりです。

1. 明らかに、行の第二セットでは、私は2つのバインディングを持っているし、それは動作しません。 ngIfとngForを連動させるにはどうすればよいですか？ （もしngIfをtrをラップする別のdivに入れると、HTMLは新しいテーブルのセットを大きなテーブルの最初のセルの別のテーブルとして扱います）。 a。私はこの問題をtemplate要素を使って解決しました。
2. 最初の本は2番目の行で繰り返されます。
3. メインの行（名前がある行）のいずれかをクリックすると、すべての行が開きます。私はクリックした行だけを開きたい。もう少し調べてみると、クリックされた実際の行をどのように渡すかがわかりますが、簡単な答えがあれば気にしません。
4. 最後の行は1冊しかないため、展開する必要はありません。私はそれをunclickableにしたいですが、私はそれを行う方法がわかりません。

Answer 1

1. そうです。またngOnInit以下かを参照してください（あなたのfavBooksプロパティは常に配列であることを確認してくださいあなたはrecord.openedのようないくつかのプロパティを使用して
2. をクリックして切り替えることができrecord.favBooks | slice: 1
3. のように代わりに<template [ngIf]
4. 使用SlicePipeの<ng-container *ngIf>でそれをラップすることができますここに記載されたようにArrayifyPipeパイプを使用する。Does NgFor support Arrays containing one Object）。そして、あなたは自分の視野ここ

Plunker Example

上に所望のロジックを実行するためにrecord.favBooks.length > 1のような状態を作ることができ、コードは次のとおりです。

ビュー

<table> 
    <thead> 
    <tr> 
    <th id="accordion-icon"></th> 
    <th id="person-name">Name</th> 
    <th id="fav-book">Favorite Book(s)</th> 
    </tr> 
    </thead> 
    <tbody *ngFor="let record of records; let even = even"> 
    <tr [ngClass]="{even: even, clickable: record.favBooks.length > 1}" (click)="record.favBooks.length > 1 ? record.opened = !record.opened : false"> 
     <td name="accordion-icon"> 
     <i [ngClass]="{'material-icons': record.favBooks.length > 1, opened: record.opened}"></i> 
     </td> 
     <td name="person-name">{{record.firstName}} {{record.lastName}}</td> 
     <td name="fav-book">{{record.favBooks[0]}}</td> 
    </tr> 
    <template [ngIf]="record.opened && record.favBooks.length > 1"> 
     <tr *ngFor="let book of record.favBooks | slice: 1" [ngClass]="{even:even}"> 
     <td name="accordian-icon"></td> 
     <td name="person-name"></td> 
     <td name="fav-book">{{book}}</td> 
     </tr> 
    </template> 
    </tbody> 
</table> 

コンポーネント ：

export class AppComponent { 
    records = [{ 
    firstName: "Joe", 
    lastName: "Smith", 
    favBooks: ["1984", "Animal Farm", "Lord of the Rings", "Where the Sidewalk Ends"] 
    }, 
    { 
    firstName: "Jane", 
    lastName: "Jameson", 
    favBooks: ["Harry Potter", "Ender's Game", "Chronicles of Narnia"] 
    }, 
    { 
    firstName: "Sam", 
    lastName: "Baker", 
    favBooks: "The Pelican Brief" 
    }] 

    ngOnInit() { 
    this.records.forEach((x: any) => { 
     x.favBooks = Array.isArray(x.favBooks) ? x.favBooks : [x.favBooks]; 
    }) 
    } 
};