3
作成する単純なコンポーネントを作成したいと思います。たとえば、列番号と行番号の2つの入力があります。反復配列なしの角度からのマークアップの生成
どのように行と列のユーザー数によって選択するのですか?
ここにテンプレートがあります。用を反復することは、私にとって臭い:それは実際にはtypescriptです
作成する単純なコンポーネントを作成したいと思います。たとえば、列番号と行番号の2つの入力があります。反復配列なしの角度からのマークアップの生成
どのように行と列のユーザー数によって選択するのですか?
ここにテンプレートがあります。用を反復することは、私にとって臭い:それは実際にはtypescriptです
でそれを行うことが素晴らしいことだ<
<input type="number" placeholder="Length"/>
<input type="number" placeholder="width"/>
<div class="map">
<div class="row">
<div class="cell">Test</div>
</div>
</div>
、同じテンプレート内ngFor
内ngFor
を持つことは、おそらく理想的ではありません。
つまり、1つまたは複数の他のコンポーネントを利用して、異なるループを分割することができます。たとえば、行に1つ、セルに1つ。この場合
は、あなたが持っているでしょう:
<div class="map">
<div class="row" row [cells]="row.cells" *ngFor="let row of rows"></div>
</div>
を行コンポーネント
@Component({
selector: 'row',
template: `
<div *ngFor="let cell of cells">{{cell.value}}</div>
`
})
export class RowComponent {
@Input()
cells: any[];
}
のためにまた、あなたがngFormTemplate
ディレクティブを活用できることに気づくことができました。私は正確にあなたのユースケース...
は、詳細については、これらの質問を参照してくださいしないでください:
私はこの質問が広すぎるかは不明のどちらかだと思います。そのようなコンポーネントを生成する方法はいくつでもあります。開始するには、[Angular 2 Documentation](https://angular.io/docs/ts/latest/guide/)をお試しください。 – apkostka
ええ、1から幅までの範囲のダミー配列を作成してそれを反復することもできますが、それは恐ろしい考えですが、うまくいきます。しかし、ドキュメントで私が指定したケースをカバーするベストプラクティスが見つかりませんでした – dklos