如何更改 angular 8 中子组件的下拉值

Question

试图更改 angular 8 中子组件的下拉值，但我不知道该怎么做 it.If 任何知道的人请帮助找到解决方案。

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

Answer 1

您需要在此处实现事件绑定以将数据从 body 组件传递到 app 组件，为此您需要使用 Output() and 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' 以跟踪应用程序组件 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

如何更改 angular 8 中子组件的下拉值

How to change dropdown value from child component in angular 8

typescript

angular7

angular8