在帶有角度的條件下添加屬性2

我有一個從數組中填充的簡單下拉列表。用戶將以可從所述下拉列表中選擇記錄的優先級的形式編輯記錄。我在設置該下拉列表中的選定項目時遇到困難。這是我爲下拉代碼：在帶有角度的條件下添加屬性2

<select *ngIf="formModel" [(ngModel)]="record.priority" formControlName="priority"> 
    <option value="-1">Select priority</option> 
    <option *ngFor="let priority of formModel.priorities" 
     [ngValue]="priority" 
     [innerHtml]="priority.name" 
     [selected]="priority.id == record.priority.id"></option> 
</select>

然而，不選擇記錄的優先選擇，生成的HTML顯示selected="true"。當我改變的代碼如下：

[selected]="(priority.id == record.priority.id ? '' : null)"

結果是selected=""，但該選項STIL未選中。我已經確認應該選擇該特定選項。此外，當我將Firebug中的HTML更改爲selected時，該選項被選中。所以我的問題是：如何在特定條件下添加屬性，以便該屬性不會添加到具有空值的其他元素？

來源

2017-06-09 Bunnynut

您選擇的'ngModel'必須具有您的選項之一的值。在這裏，你的選項值是一個對象，而HTML很難讀取JS對象。相反，請嘗試在選項值中使用屬性，例如'name'或'id'，並將ngModel綁定到它。 – trichetriche

使用兩way-以反應形式阻止結合。關鍵是要使用表單控件。爲什麼使用反應形式，如果您使用雙向綁定？這意味着模型驅動的形式是完全多餘的。所以，如果你想使用模型驅動的形式來解決這個問題，我會建議如下：

由於您使用的是單獨的對象（record.priority），它不能自動綁定爲預選值， d必須以某種方式創建一個參考。所以建立一個表格時，你可以這樣做：

this.myForm = this.fb.group({ 
    priority: [this.formModel.priorities.find(x => x.id == this.record.priority.id)] 
});

而且模板是這樣的：

<form [formGroup]="myForm"> 
    <select *ngIf="formModel" formControlName="priority"> 
    <option value="-1">Select priority</option> 
    <option *ngFor="let priority of formModel.priorities" 
     [ngValue]="priority" 
     [innerHtml]="priority.name"></option> 
    </select> 
</form>

現在你從形式所獲得的價值對象保存此值。

如果record來了異步，您可以設置布爾標誌，直到設置值才顯示錶單。或者您可以先創建一個空表單，然後使用表單控件setValue()。

DEMO

編輯：更仔細地觀察，要必須設置null如果對於record.priority沒有價值的條件？這可以在表單控件中很好地完成：

priority: [this.record.priority ? this.formModel.priorities.find(x => x.id == this.record.priority.id) : null]

來源

2017-06-09 11:17:52 Alex

使用該代碼確實選擇了正確的選項。現在的問題是我如何反映對'record'所做的任何更改？ 'record'實際上是這個組件的@Input（）'。 – Bunnynut

'this.record.priority = this.myForm.controls ['priority'] .value'有效，但是我希望有一個更簡單的方法。 – Bunnynut

爲什麼你需要將值添加到'record'？您在由form創建的對象中具有值，爲什麼不使用它呢？ :) **或**您是否確實需要「記錄」來做一些額外的事情？也許重新考慮反應形式並做一個模板驅動的形式，因爲如上所述，雙向綁定是不鼓勵的。整個觀點是用模型驅動的形式「取代」雙向綁定。也許你的要求更適合模板驅動的形式？很難說僅根據這些信息:) – Alex

試試這個：

<select *ngIf="formModel" [(ngModel)]="record.priority.id" formControlName="priority"> 
    <option value="-1">Select priority</option> 
    <option *ngFor="let priority of formModel.priorities" 
     [ngValue]="priority.id" 
     [innerHtml]="priority.name"></option> 
</select>

[ngValue]="priority.id"和[(ngModel)]="record.priority.id"應指向相同的值，它會自動工作，

有沒有必要寫[selected]="priority.id == record.priority.id"

來源

2017-06-09 10:03:44

這是行不通的，但是當我將「記錄」發佈到服務器時，更改不會反映在發佈的數據中，因此優先級仍然具有舊值。此外，這適用於這個特定的屬性，但如何工作任何其他屬性？如何在條件中添加或省略屬性？ – Bunnynut

你能通過猛擊給我看嗎？ –

在帶有角度的條件下添加屬性2

回答

相關問題