TypeScriptで必要なデータだけ代入して表示
Angularに限った話ではないかもしれないですが、
定義された独自クラスのインスンタンス変数に必要なデータだけ代入してテンプレートで表示したい時のやり方について。よくやるので書きます。
hoge.model.tsexport class Hoge { id: string; name: string; dateCreated: Date; fuga: Fuga; }
このようなモデルが定義されていて、Hoge型のnameプロパティのみ入ったデータを配列で用意してテンプレートで表示させたい時、
test.component.tsimport { Hoge } from './hoge.model.ts'; @component({ selector: 'app-test', styleUrl: './test.component.scss', templateUrl: './test.component.html' }) export class TestComponent { readonly hoges: Hoge[] = [ { name: 'sato' }, { name: 'taro' }, { name: 'jiro' } ] as Hoge[]; }
このように記述して表示できます。本来idやdateCreatedなど定義されているデータを代入しないとエラーがでますが、as Hoge[]とすることで型情報の上書きが行われエラー回避できます。
test.component.html<div *ngFor="let hoge of hoges"> {{ hoge.name }} </div>