Question

hash = {
      form: {
        name: "some name", 
        surname: "some surname",
        date: "2018-10-10"
      }, 
      element_name: "some name" 
    }

我的点击在IE中不起作用，在chrome中有效。如何使其在IE中工作？

Answer 1

在git push上使用(click)，而不是option上的(change)。我建议这样做，因为它性能更高，并且只有在更改选项时才会被触发。这就是我们一直在这里寻找的东西。

在这里，尝试一下：

select

在您的组件中：

<select (change)="findSso($event.target.value)">
  <option value="null" disabled>Select a Vendor</option>
  <option *ngFor="let vendor of vendors" [value]="vendor.name">{{ vendor.name }} </option>
</select>

这是您推荐的Working Sample StackBlitz。

更新

如果您希望传递完整的对象，则可以执行以下操作：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  vendors = [
    { name: 'test', age: 123 },
    { name: 'tes34t', age: 12233 }
  ];

  findSso(selectedVendor) {
    console.log('Got the selectedVendor as : ', selectedVendor);
    // DO the needful here.
  }
}

在这里，我们使用json管道将Object转换为字符串。

现在在您的模板中，只需在传入参数上调用<select #selectList (change)="findSso(selectList.value)"> <option value="null" disabled>Select a Vendor</option> <option *ngFor="let vendor of vendors" value="{{ vendor | json }}">{{ vendor.name }} </option> </select>：

JSON.parse

该代码已存在于示例StackBlitz中。

Answer 2

onclick对于option标签（see here）不是有效事件。您应该在onchange标记上使用select事件，以在值更改时获取事件。示例：

<select (change)="findSso($event.value)">
  <option *ngFor="let l of vendors" [value]="l">{{ l }} </option>
</select>

Answer 3

请使用更改事件来代替(click)。和[(ngModel)]可用于通过ngModelChange事件检测更改。

对于<option></option>标签[ngValue]的指令可以使用string或object，并通过ngModel可以跟踪更改事件。

<select [ngModel]="selectedValue" (ngModelChange)="selectedValue=$event">
  <option value="null" disabled>Select a Vendor</option>
  <option *ngFor="let vendor of vendors" [ngValue]="vendor">{{ vendor.name }} </option>
</select>

供参考，添加了stackblitz代码。

Click事件在angular 4中的选项标签上不起作用

3 个答案:

更新