オブジェクトの配列を返すAPIサービスがあります。各オブジェクトには、名前と使用法の2つのフィールドがあります。フォームフィールドの数が配列内のオブジェクトの数と等しいフォームを動的に作成しています。フォームフィールドの名前はであり、値をname事前に入力する必要がありusageます。フォームを作成してフォームフィールドに名前を付けることはできますが、usage各フォームフィールドに正しい値が表示されません。私のTSファイルコード：
ngOnInit() {
this.apiCall.getArray()
.subscribe(
(res: any) => {
this.receivedData = res;
for (let i = 0; i < this.receivedData.length; i ++){
this.currentName = this.receivedData[i].name;
this.currentUsage = this.receivedData[i].usage;
this.name.push(this.currentName);
this.usage.push(this.currentUsage);
}
名前と使用法は、値が格納される配列です。私のHTMLでは：
<form>
<div class="form-row">
<div class="form-group *ngFor="let plans of name">
<label>{{plans}}</label>
<input type="number" min="0" class="form-control" id="usage" name="usage" value="usage" [(ngModel)]="usage">
</div>
</div>
</form>
これで、フォームフィールドに正しいフィールド名が表示されますが、フィールドは空です。それらにはそれぞれの使用値が事前に入力されている必要があり、ユーザーは必要に応じて値を変更できる必要があります。
あなたのコードにはいくつか問題があると思います。
まず、Angular*ngForループ内の属性に値を割り当てたい場合は、のようなことを行う必要がありますitem.foo。その次に[]、データは動的であるため、実際に値を属性に渡し、データの配列をループするために角括弧が必要です。
最後の問題は、あなたが割り当てていない番号は（私は仮定できるということであるitem.usageだろうnumberのような文字列に）idとname。またtype="number"、inputフィールドにを追加したためです。
これにより、HTMLで次の設定が行われます。データをループして、let item of items必要な場所でキーを選択しています。
<form>
<div class="form-row">
<div class="form-group" *ngFor="let item of items">
<label>{{item.name}}</label>
<input type="number" min="0" [id]="item.name" [name]="item.name" class="form-control" [(ngModel)]="item.usage">
</div>
</div>
</form>
いくつかのモックデータを使用すると、機能することがわかります。
received = [
{
name: 'Field 1',
usage: 123456,
},
{
name: 'Field 2',
usage: 4655454,
},
{
name: 'Field 3',
usage: 54445,
}];
実用的な例については、このStackBlitzの例を参照して、前述のすべての問題を修正してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加