如何从 select 下拉菜单中可观察到的 firebase 设置 Angular 2 ngModel
How do I set Angular 2 ngModel from a firebase observable on a select dropdown
我正在尝试使用 angularfire 2 在 firebase 对象的 select 下拉列表中设置默认值。但我不知道如何设置 [=24] 的默认值=] 框。 ngModel 不允许像 (ngModel)="(default_tax | async)"
这样的东西
代码:
public default_tax$:Observable<any>;
public tax$:Observable<Tax>;
ngOnInit(): void {
this.tax$ = this.db.list(`tax_rates`);
this.default_tax$ = this.db.object(`settings/default_tax_rate`);
}
模板:
<select name="tax_rate" (ngModel)="default_tax.$key" (ngModelChange)="onSelect($event)">
<option *ngFor="let tax of (taxes$ | async)" [ngValue]="tax.$key">
{{tax.name}} - {{tax.rate}}
</option>
</select>
Firebase 对象:
account:
setttings:
default_tax_rate: "-somekey"
tax_rates:
"-somekey":
"name":"5.5"
"-someotherkey"
"anothername":"4.5"
好的,我知道怎么做了。我写错了 ngModel。
错误:
(ngModel)="default_tax.$key"
(ngModel)="(default_tax | async)"
正确:
[ngModel]="(default_tax | async)?.$value"
Note that ngModel is wrapped with []
instead of [()]
or ()
. Brackets[]
indicate input, where parenthesis()
indicate output. Having both [()]
is for two-way binding (both input and output).
http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
是一个很好的指南,可以帮助您更详细地理解这一点
我正在尝试使用 angularfire 2 在 firebase 对象的 select 下拉列表中设置默认值。但我不知道如何设置 [=24] 的默认值=] 框。 ngModel 不允许像 (ngModel)="(default_tax | async)"
代码:
public default_tax$:Observable<any>;
public tax$:Observable<Tax>;
ngOnInit(): void {
this.tax$ = this.db.list(`tax_rates`);
this.default_tax$ = this.db.object(`settings/default_tax_rate`);
}
模板:
<select name="tax_rate" (ngModel)="default_tax.$key" (ngModelChange)="onSelect($event)">
<option *ngFor="let tax of (taxes$ | async)" [ngValue]="tax.$key">
{{tax.name}} - {{tax.rate}}
</option>
</select>
Firebase 对象:
account:
setttings:
default_tax_rate: "-somekey"
tax_rates:
"-somekey":
"name":"5.5"
"-someotherkey"
"anothername":"4.5"
好的,我知道怎么做了。我写错了 ngModel。 错误:
(ngModel)="default_tax.$key"
(ngModel)="(default_tax | async)"
正确:
[ngModel]="(default_tax | async)?.$value"
Note that ngModel is wrapped with
[]
instead of[()]
or()
. Brackets[]
indicate input, where parenthesis()
indicate output. Having both[()]
is for two-way binding (both input and output).
http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
是一个很好的指南,可以帮助您更详细地理解这一点