使用 ngFor 的 Angular2 输入答案

【问题标题】：Angular2 input with ngFor使用 ngFor 的 Angular2 输入
【发布时间】：2017-12-04 02:14:31
【问题描述】：

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

HTML

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

@Input('EventInput') EventInput: any;

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

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

谢谢。

【问题讨论】：

你不能。选项的值只是一个字符串。您可以使用JSON.stringify 将所有对象传递给值（我不推荐），或者在更改函数中使用find、filter 或reduce 等数组方法。
感谢您的快速回复，能否请您提供一个简单的更改功能示例
不，我不能抱歉，因为我真的不明白你的代码和你的解释。另外，它缺少某些部分，例如您的 events 属性。
感谢您的快速回复。
没问题。如果您想开始，请尝试在您的更改功能中执行此操作：this.events.filter(ev => console.log(ev)) 并查看如何将您的 event 变量与此 ev 进行比较

标签： angular input ionic2 ngfor

【解决方案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);
}

不要忘记在 AppModule 中导入FormsModule @NgModule

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

编辑

【讨论】：

感谢您的回复，我安装了适用于 Angular 2 / Angular 4 的 ng2-search-filter。我的意思是我从 ngFor {{event of events}} 获取数据我想要发送包括 id、name、aaddress 在内的所有事件数据。但是选项只发送事件的名称
这对我帮助很大，我用 [ngValue] 解决了谢谢。