Question

在我正在处理的应用程序中，根据权限，某些用户会获得一个选项列表，而其他用户则会受到限制。 IE管理员可以查看所有商店，普通用户只能看自己。我有以下标记：

<p *ngIf="storeList.length > 1">
    <label>Store:</label>
    <select [(ngModel)]="storeNumber">
        <option></option>
        <option *ngFor="let store of storeList" [value]="store.id">{{ store.name }} (#{{ store.internal_id }})</option>
    </select>
</p>

<input *ngIf="storeList.length <= 1 type="text" [(ngModel)]="storeNumber" ngFor="let store of storeList" value="{{ store.id }}">

以下是相关的控制器详细信息：

submitFabricReservation() {
    let base = this;
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    let url = `http://laravel.localhost/fabrics/reservation`;
    let data = {
        cloth: this.cloth,
        garment_type: this.garmentType,
        consumer_name: this.consumerName,
        store_number: this.storeNumber
    };

    return this.http.post(url, JSON.stringify(data), { headers: headers })
        .toPromise()
        .then(function(data) {
            base.messageService.unshift(data.json());
            base.modal.dismiss();
        });
}

工作正常。文本框应显示，并且具有正确的ID作为其值。控制器函数中的 BUT ，this.storeNumber未定义。如果我手动编辑文本框中的值，则控制器接收该值，并将this.storeNumber设置为我在输入框中键入的内容。似乎就像模型只有在发生更改事件时才会更新，或者，当它仍然是原始状态时，该角度会忽略它。

我可以看到问题的一些方法，但我不知道如何做所有这些。我也不知道哪个（如果有的话）是适当的角度方式来做事。我可以：

在http回调中设置this.storeNumber（我知道该怎么做）
强制更改事件以触发输入（我何时以及何时执行此操作？）
在元素（#storeNumber）上设置一个id并强制获取那个值

我不确定这些是否是正确的选择。这似乎是经常出现的事情。我必须遗漏一些东西，因为它看起来应该很容易。有什么想法吗？

Answer 1

第一个是正确的选择。这就是约束力：真相的单点就是模型。视图仅显示（并允许修改）模型。因此，如果您希望文本字段具有给定值，则不要在视图中设置它。您可以在模型中进行设置，并且由于输入绑定到模型，因此它会显示其值。

请注意，如果商店列表中有多个元素，您会问自己如何在具有所选storeNumber的选项上设置或删除所选属性。好吧，你不需要，因为select再次绑定到storeNumber。因此，只需在模型中设置storeNumber即可选择相应的选项。

从Angular2

1 个答案: