3

Angular 2 プロパティ バインディングで非常に奇妙な動作をしています。

まず、これは Store クラスです。

export class Store {
    id: number;
    name: string;
    address: string;
}

これはコンポーネント コードです。

export class MyBuggyComponent implements OnInit {

  stores: Store[];
  selectedStore: any;
  error: any;

  constructor(private myDataService: MyDataService) { }

  ngOnInit() {
    this.myDataService.getStores().subscribe(
      stores => this.stores = stores,
      error => { this.error = error; console.log(this.error); });
  }

  selectionChanged(value: any){
    console.log("DEBUG: " + value);
  }
}

そして、これが私を夢中にさせるテンプレートです!

<form>
  <div class="form-group">
    <label for="store">Select store:</label>
    <select class="form-control custom-select" id="store" name="store" required 
      [(ngModel)]="selectedStore" (change)="selectionChanged($event.target.value)">
      <option *ngFor="let s of stores" [value]="s">{{s.name}}</option>
    </select>
    <small class="form-text text-muted" *ngIf="selectedStore">Address: {{selectedStore.address}}</small>
  </div>
</form>

[value]="s"ここではoptionofタグのバインディングが<select>機能しません! 空のオブジェクト (?)に設定し、タグにselectedStore空のAddress:テキストを表示し、ログに記録します: コンソール (で)。ただし、補間は期待どおりに機能します（選択ボックス内に名前が表示されます）。<small>DEBUG: [object Object]selectionChanged(){{s.name}}

これを見てください: テンプレートに次の変更を加えると、期待どおりに動作します:

  <option *ngFor="let s of stores" [value]="s.address">{{s.name}}</option>
</select>
<small class="form-text text-muted" *ngIf="selectedStore">Address: {{selectedStore}}</small>

これでバインドが機能し、アドレスがコンソールに記録され、<small>タグにも適切に表示されます。そのため、バインディング[value]="s"は機能しません (実際には奇妙な「オブジェクト」値が返されます) が、バインディング[value]="s.address"は期待どおりに機能します。私はドキュメントに従いましたが、そのような制限については言及されていません。これはバグですか？または、何か不足していますか？

4

2 に答える 2

3

[value]バインドされた値として文字列値のみをサポートします。代わりに使用してください[ngValue]。オブジェクトをバインドできます。

于 2016-11-13T20:37:28.323 に答える
-1

私は同じ問題を抱えています、あなたは私の解決策を試すことができます：

<select class="form-control custom-select" id="store" name="store" required 
  [(ngModel)]="selectedStore" (change)="selectionChanged($event.target.value)">
  <option *ngFor="let s of stores; let i = index" value="{{i}}">{{s.name}}</option>
</select>

// .ts
selectionChanged(value: any){
   // this.selectedStore = position in stores
   console.log(this.stores[this.selectedStore]);
}
于 2016-11-14T03:26:14.437 に答える