如何在第一次渲染后模拟 select onchange答案

【问题标题】：How can I simulate select onchange after first rendering如何在第一次渲染后模拟 select onchange
【发布时间】：2019-09-19 19:54:06
【问题描述】：

我在 angular (5) 中有一个 select 组件，其选项由 ngFor 创建，根据所选选项，我会在页面上隐藏/显示一些内容。 p>

为此，我定义了 (change) of select。

当我更改所选选项时，一切都会正常工作。

但是，即使在第一次加载网页后，我也想这样做，而不必单击“选择”并更改所选选项。

所以，我需要在第一次加载页面后模拟（更改）。

我该怎么做？

<select (change)="onClick()">
    <option *ngFor="let opt of options" [value]="opt.value">{{opt.key}}</option>
</select>

*编辑：我可能有好几种情况。所以我想要一个“自动化”的解决方案，而不是搜索每个选择的组件等。

【问题讨论】：

在组件中调用onClick()？

标签： javascript html angular

【解决方案1】：

在ngAfterViewInit() 内调用onClick()

【讨论】：

【解决方案2】：

Angular 的做法是在你的选择中使用two-way binding。

组件：

@Component({...})
export class AppComponent {
  options = [
    {key: "one", value: "First option"},
    {key: "two", value: "Second option"},
    {key: "three", value: "Third option"}
  ];

  selectedOption = "one";
}

模板：

<select [(ngModel)]="selectedOption">
  <option *ngFor="let opt of options" value="{{opt.key}}">{{ opt.value }}</option>
</select>
<p *ngIf="selectedOption === 'one'">First option selected</p>
etc.

然后，您可以简单地从组件代码中为selectedOption 分配一个新值，其模板将相应更新。

检查这个简单的例子： https://stackblitz.com/edit/angular-xxhbgp

【讨论】：