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

debugcn 发表于 Dev

古腾

试图从角度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

马尼拉吉·穆鲁甘（Maniraj Murugan）

您需要在此处实现事件绑定，以将数据从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'以跟踪应用程序组件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)"是您从单击的相应按钮中接收数据的地方。

然后在应用程序组件ts文件中，您可以包含一个函数来处理主体组件中发生的按钮单击更改，并通过设置的值来更改下拉选择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：