如何从 Angular 8 中的子组件更改下拉值答案

【问题标题】：How to change dropdown value from child component in angular 8如何从 Angular 8 中的子组件更改下拉值
【发布时间】：2021-01-23 19:09:44
【问题描述】：

试图从 Angular 8 中的子组件更改下拉值，但我不知道该怎么做。如果有人知道，请帮助找到解决方案。

If i click France button want to set dropdown value France.
If i click Germany button want to set dropdown value Germany.
If i click Italy button want to set dropdown value Italy.

app.component:

<select name="city" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries"  [value]="country.id">{{country.name}}</option>
</select>

body.component：

<button (click)="changeVal('France')">France</button>

<button (click)="changeVal('Germany')">Germany</button>

<button (click)="changeVal('Italy')">Italy</button>

演示::https://stackblitz.com/edit/angular-dropdown-geishz?file=app%2Fapp.component.html

【问题讨论】：

你能澄清一下预期的结果是什么吗？我很难理解您的问题。
@GytisTG：编辑我的问题

标签： typescript angular7 angular8

【解决方案1】：

您需要在此处实现事件绑定，将数据从body 组件传递到app 组件，为此您需要使用Output() 和EventEmitter()。

所以修改过的文件：

body.component.ts：

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {

  @Output() valueChange = new EventEmitter()

  constructor() { }

  ngOnInit() {
  }

  changeVal(val){
    this.valueChange.emit(val);
  }

}

包含[(ngModel)]='selectedCountry' 跟踪app组件html中的下拉变化如下，

app.component.html：

<p>
    App Component:
</p>

<select name="selectedCountry"  [(ngModel)]='selectedCountry' class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries; let i = index" [value]="country.id"> 
    {{country.name}}</option>
</select>


<app-body (valueChange)="getValueChange($event)"></app-body>

在上面的代码中，(valueChange)="getValueChange($event)" 是您从单击的相应按钮接收数据的位置。

然后在app组件的ts文件中，你可以包含一个函数来处理body组件中发生的按钮点击变化，并通过设置this.selectedCountry = selectedOption.id的值来改变下拉选择，

  getValueChange(val) {
    const selectedOption = this.countries.find(x => x.name == val);
    this.selectedCountry = selectedOption.id;
    this.onChange(selectedOption);
  }

app.component.ts：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular 5';

  cities = {};

  countries = [{
    id: 1, name: 'France' 
  },
  {
    id: 2, name: 'Germany' 
  },
  {
    id: 3, name: 'Italy' 
  },
  ];

  selectedCountry: any = this.countries[0].id;

  ngOnInit() {
    this.cities = this.countries.filter(x => x.id == 1);
  }

  onChange(deviceValue) {
    this.cities = this.countries.filter(x => x.id == deviceValue);
    console.log('onchange ', deviceValue)
  }

  getValueChange(val) {
    const selectedOption = this.countries.find(x => x.name == val);
    this.selectedCountry = selectedOption.id;
    this.onChange(selectedOption);
  }

}

分叉的 Stackblitz：

https://stackblitz.com/edit/angular-dropdown-65tfxg

【讨论】：