將所選選項從下拉列表綁定到Typesscript對象Angular 2

Question

我有一個用戶可以創建Todo的表單。 ITodo具有以下屬性：

export interface ITodo {
    id: number;
    title: string;
    priority: ITodoPriority;
}
export interface ITodoPriority {
    id: number;
    name: string;
}

因此，創建Todo包括設置title -property以及從下拉列表中選擇priority 。 該表格如下所示：

<form (submit)="saveTodo()">
    <input type="text" [(ngModel)]="todo.title" />
    <br />
    <select (change)="setPriority($event.target.value)">
        <option *ngFor="let priority of formModel.priorities" [value]="priority" [innerHtml]="priority.name"></option>
    </select>
</form>

而我的Component ：

@Component({
    selector: "[todo-form]",
    templateUrl: "todo-form.view.html"
})
export class TodoFormComponent implements OnInit {
    private formModel: ITodoFormModel;
    private todo: ITodo = {
        id: -1,
        name: "",
        priority: null
    };

    ngOnInit() {
        //Retrieve formmodel, set in actual code
    }

    private setPriority(priority: any): void {
        this.todo.priority = priority; //This is where the problems is
    }
}

問題出在函數setPriority ，尤其是在我嘗試設置this.todo.priority的部分中。 參數priority的值是可用的，但是我無法將其設置為this.todo.priority 。 我嘗試過的方法以及有效的方法如下：

private setPriority(priority: any): void {
    let p: ITodoPriority = null;
    this.formModel.priorities.forEach(function (item) {
        if(priority == item) {
            p = item;
        }
    });
    this.todo.priority = p;
}

因此，這確實有效，但看起來有點難看且效率低下。 正確執行此操作的方法是什么？

Answer 1

為什么還不priority使用雙向綁定？ 另外，由於您使用的是表單，所以我很驚訝它不會在表單中不使用name -attribute來引發錯誤，但是無論如何，請使用雙向綁定，並且由於priority是一個對象，並且您想要綁定整個對象，使用[ngValue] 。 因此，您的選擇將如下所示：

<select [(ngModel)]="todo.priority" name="priority" >
  <option *ngFor="let priority of formModel.priorities" [ngValue]="priority">
      {{priority.name}}
  </option>
</select>

所以這里不需要更改事件，因為您正在使用雙向綁定:)

Answer 2

嘗試這樣做：

<select (ngModelChange)="setPriority($event)">
        <option *ngFor="let priority of formModel.priorities" [value]="priority" >{{priority.name}}</option>
</select>

如果它不起作用，您能否告訴您更改時收到的對象的值

private setPriority(priority: any): void {
    this.todo.priority = priority; //Is this value you are receiving correct?
}