Angular 2 NgModel + ngFor内の値が機能しません。

Question

私は単純なangular2アプリケーションを作成しています。

ngForのngModule + valueに問題があります。 ngModuleを使用すると、フォーム入力内の値は表示されません。 ngModuleを削除しても、すべて正常に動作します。しかし、私はngModuleを使う必要があります。ヘルプngModuleによるデータバインディングも機能しています。

これは私のhtmlコードです：あなたが値を変更したいと仮定すると、ヘルプのための

export class AdminComponent implements OnInit { 
homeData: Object; 
address: String; 
city:String; 
companyName: String; 
country: String; 
zipCode: String; 

    constructor(
private adminServ: AdminService 

) { } 

    ngOnInit() { 
    this.adminServ.getHomeData().subscribe(res => { 
    if(res){ 
     this.homeData = res; 
     console.log(this.homeData); 
    } 
    }); 

    } 

    updateAddress(){ 
    let newAddress = { 
     address: this.address, 
     city: this.city, 
     companyName: this.companyName, 
     country: this.country, 
     zipCode: this.zipCode 
    } 
    console.log(newAddress); 
    } 

} 

感謝:)

Answer 1

：

`<div class="col-xs-12" *ngFor="let data of homeData; let i = index"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <form (ngSubmit)= "updateAddress()"> 
     <div class="form-group"> 
      <input type="text" class="form-control" value="{{data.companyAddress.address}}" name="address{{i}}" [(ngModel)]="address"/> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" value="{{data.companyAddress.city}}" name="city{{i}}" [(ngModel)]="city"/> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" value="{{ data.companyAddress.companyName }}" name="companyName{{i}}" [(ngModel)]="companyName"/> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" value="{{data.companyAddress.country}}" name="country{{i}}" [(ngModel)]="country"/> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" value="{{data.companyAddress.zipCode}}" name="zipCode{{i}}" [(ngModel)]="zipCode"/> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 

    </div> 
    </div> 

`

そして、ここに私のコンポーネント表示している場合、ngModelは双方向バインドなので、valueプロパティは不要です。また、ngModelのセレクタがコントローラをポイントしており、ループする値ではありません。したがって、次のコードで修正する必要があります（住所については、あなた自身で行うことができます:)）：

<input type="text" class="form-control" name="address{{i}}" [(ngModel)]="data.companyAddress.address"/></div>