Как я могу симулировать select onchange после первого рендеринга

Question

У меня есть компонент select в angular (5) с параметрами, созданными ngFor , и в зависимости от выбранного параметра некоторые вещи я скрываю / показываю на странице.

Для этого я определил (изменить) выбора.

Все работает, когда я изменяю выбранную опцию.

Однако я хочу сделать этодаже после первой загрузки веб-страницы, без необходимости нажимать кнопку Выбрать и изменять выбранную опцию.

Итак, мне нужно смоделировать (изменить) после первой загрузки страницы.

КакМогу ли я сделать это?

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

* Редактировать : У меня может быть несколько случаев этого.Поэтому я хотел бы иметь «автоматизированное» решение, а не искать все выбранные компоненты и т. Д.

Answer 1

Звоните onClick() внутри ngAfterViewInit()

Answer 2

Угловой способ сделать это - использовать двустороннюю привязку с вашим выбором.

Компонент:

@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