NG-ゾロ-antdはピットに強化しました

プロジェクトのフロントエンドは、私たちは多くの場合、オープンソースコンポーネントライブラリアリ使用：直接使用を持参することができるようになります、アリ・設計、部品が過半数のニーズを満たすのに十分だった提供し、非常に便利で、当然のことながら、いくつかの企業は、二つのコンポーネントライブラリをさせていただきます製品の非常に自身のスタイルに変身二次包装、。

この連載では、背の高い上の事柄についての話は、プロジェクトに遭遇した唯一のいくつかのマイナーな問題を共有するために、基本となるソースコードに行っていません。

表（テーブル）

- 私はそれがバグマスターコンポーネントライブラリだと思った、私は期待していなかった......

私はあなたが読者が経験していない、この記事を読んでいるか分かりません。

使用して<nz-table></nz-table>、あなたが示した、テーブル内の最後の項目を削除すると、時間を「データなし」の画像、そして、データテーブルを追加するために再び時間、「データなし」の画像が消えないことがわかりました。
表が示すいくつかのデータが、一括削除データ（もちろん、あなたが一つも手動で削除することができます1）した後、画像は発生しなかったことを「データなし」。

我々はそれを行う方法古いと、この空の状態？我々は適切に我々の期待に応えることができませんか？言及に、本当に、しかし、チャンスは非常に高いわけではありません。

「何のデータがまだ」通常の画像は、まれに表示されません（そこ？率を獲得し、そのような何かのボトルを戻ってくる場合があります）。

私たちは、削除エントリを追加したときに、ではないことを非常に簡単なリコール実際にはこのようにそれを行うために、この問題が発生します。

<nz-table [nzData]=“itemList”>
    <thead>
        <tr *ngFor=“let item of itemListHead”>
            <td>{{item.label}}</td>
        </tr>
    <tbody>
        <tr *ngFor=“let item of itemList”>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </tbody>
</nz-table>

public itemList: any[] = [];
public itemListHead = [
    { label: ‘name’ },
    { label: ‘age’ }
];
add(item: any) {
    this.itemList.push(item);
}

delete(index) {
    this.itemList.splice(index, 1);
}

これは、コードが問題ではないようであるが、問題は知っている、push()とsplice()多分関数は元の配列を直接操作することで、元の配列を変更する、しかし......それについて考えるだろう、彼は配列への参照を変更するだろう？しません。

角度の設計では、onChanges()変更内容を監視しますか？なお、基準です。

それでは、上記の問題を解決することができる対処するための参照を変更する方法を考えます。

add(item: any) {
    this.itemList.push(item);
    this.itemList = [...this.itemList];
}

delete(index) {
    this.itemList.splice(index, 1);
    this.itemList = [...this.itemList];
}

本明細書で提供される方法、簡単な、迅速な、暴力的、非常に使いやすいです。

この記事を読んだ後、それの気持ちの中に明確な洞察力のようなものではないのですか？