綁定選定的選項從下拉到Typesscript對象Angular 2

我有一個窗體，用戶可以創建Todo的。一個ITodo具有以下屬性：綁定選定的選項從下拉到Typesscript對象Angular 2

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

所以創建待辦事項由設置title - 屬性，並從下拉列表中選擇一個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; 
}

那麼，這樣做的工作，但它是一個有點醜陋和低效它似乎。什麼才能正確地做到這一點？

來源

2017-05-31 Bunnynut

爲什麼不也使用雙向綁定與priority？另外，由於您使用的是表單，我很驚訝它不會因爲不在表單中使用name -attribute而導致錯誤，但無論如何，請使用雙向綁定，並且因爲priority是一個對象，並且您希望綁定整個對象，使用[ngValue]。所以，你的選擇是這樣的：

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

所以在此不再更改事件，因爲使用的是雙向結合:)

來源

2017-05-31 18:13:13 Alex

試着做這樣的：

<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? 
}

來源

2017-05-31 15:27:03

綁定選定的選項從下拉到Typesscript對象Angular 2

回答

相關問題