属性 绑定到对象在 Angular 2 中不起作用
Property binding to the object does not work in Angular 2
我在使用 Angular 2 属性 绑定时出现了非常奇怪的行为。
首先,这是一家商店class:
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>
这里 <select>
标签的 option
的绑定 [value]="s"
不起作用!它将 selectedStore
设置为某个空对象(?),它在 <small>
标记中显示空 Address:
文本,并在控制台中记录:DEBUG: [object Object]
(在 selectionChanged()
).但是 {{s.name}}
插值按预期工作(在 select-box 内显示名称)。
现在看这个:如果我对模板进行以下修改,它会按预期工作:
<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"
不起作用(实际上给出了一些奇怪的 'object' 值),但绑定 [value]="s.address"
可以按预期工作。我已经按照文档进行操作,但没有提及此类限制。这是一个错误吗?还是我遗漏了什么?
[value]
仅支持字符串值作为绑定值。使用[ngValue]
代替,它可以绑定对象。
我有同样的问题,你可以试试我的解决方案:
<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]);
}
我在使用 Angular 2 属性 绑定时出现了非常奇怪的行为。
首先,这是一家商店class:
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>
这里 <select>
标签的 option
的绑定 [value]="s"
不起作用!它将 selectedStore
设置为某个空对象(?),它在 <small>
标记中显示空 Address:
文本,并在控制台中记录:DEBUG: [object Object]
(在 selectionChanged()
).但是 {{s.name}}
插值按预期工作(在 select-box 内显示名称)。
现在看这个:如果我对模板进行以下修改,它会按预期工作:
<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"
不起作用(实际上给出了一些奇怪的 'object' 值),但绑定 [value]="s.address"
可以按预期工作。我已经按照文档进行操作,但没有提及此类限制。这是一个错误吗?还是我遗漏了什么?
[value]
仅支持字符串值作为绑定值。使用[ngValue]
代替,它可以绑定对象。
我有同样的问题,你可以试试我的解决方案:
<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]);
}