带有 ngFor 的 Angular2 输入

Question

大家好，我想将选择选项数据从ngFor发送到Ts文件，但我尝试了[attr.value]，(ngModelChange((更改(他们都只发送了数据的名称我想发送来自ngFor的所有数据

目录

<select [(ngModel)]="event" 
class="selectpicker show-menu-arrow form-control show-tick" 
data-style="btn-primary" (change)="doSomething(event)">
<option *ngFor="let event of events|filter:search" 
EventInput="{{event}}" 
[attr.value]="event2">
{{event.eventName}}
</option>
</select>

TS

@Input('EventInput') EventInput: any;
doSomething(event) {
console.log("optValue: ", event);
//this.eventDetailsPageSend(event);
console.log("input: ", this.EventInput);
}  

optValue 仅来自事件的名称，但我需要所有数据，如 id，etc(如何来自 ngFor(，以便我可以推送另一个页面。我不知道我是否应该使用输入或 ngModelChange 作为角度和这个问题的新手

谢谢。

Answer 1

我不知道你的意思是"我想将选择选项数据从ngFor发送到Ts文件"。所以我会假设你想要什么;]。 如果要设置<option>标签的value，您应该这样做

<select (change)="changed()" [(ngModel)]="selected">
<option value=""></option>
<option *ngFor="let event of events" [ngValue]="event">
{{event.name}}
</option>
</select>

在组件中添加

public selected = {};
public changed() {
console.log(this.selected);
}

不要忘记在应用模块@NgModule中导入FormsModule

我也不知道你的@Input装饰器在哪里设置了，但你只能通过@Input属性从Parent->Child组件共享数据，另一件事是，在 Angular2/4 中filter管道中不再内置。

编辑