如何在选择下拉列表中从可观察的 firebase 设置 Angular 2 ngModel答案

【问题标题】：How do I set Angular 2 ngModel from a firebase observable on a select dropdown如何在选择下拉列表中从可观察的 firebase 设置 Angular 2 ngModel
【发布时间】：2016-10-28 14:30:44
【问题描述】：

我正在尝试使用 angularfire 2 在 firebase 对象的选择下拉列表中设置默认值。但我不知道如何设置选择框的默认值。 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"

【问题讨论】：

标签： javascript angular firebase firebase-realtime-database angularfire2

【解决方案1】：

好的，我知道了如何做到这一点。我写错了ngModel。错误：

(ngModel)="default_tax.$key"
(ngModel)="(default_tax | async)"

正确：

[ngModel]="(default_tax | async)?.$value"

请注意，ngModel 用[] 包裹，而不是[()] 或()。括号[]表示输入，括号()表示输出。同时拥有[()] 用于双向绑定（输入和输出）。

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/ 是一个很好的指南，可以帮助您更详细地理解这一点

【讨论】：