Question

我有以下用于基于下拉菜单的下拉菜单代码。

<select [(ngModel)]="input-country">
  <option *ngFor="let country of countries" [value]="country"> {{ country }}</option>
</select>

<select *ngIf="country" [(ngModel)]="input-city"  (ngModelChange)="updateCity($event)>
  <option *ngFor="let city of cities" [value]="city"> {{ city }} </option>
</select>

然后我基于所选选项加载div，并将国家和城市参数传递给这样的组件

<div *ngIf="city">
    <app-render [country]="country" [city]="city"></app-render>
</div>

app.component.ts

    export class AppComponent {
      private map = new Map<string, string[]>([
        ['Poland', ['Warszawa', 'Krakow']],
        ['USA', ['New York', 'Austin']],
      ])

      country: string;
      city: string;

      get countries(): string[] {
        return Array.from(this.map.keys());
      }

      get cities(): string[] | undefined {
        return this.map.get(this.country);
      }

      updateCity(city){
        this.city = city;
      }

    }

我只是第一次选择获取国家和城市参数。如果我从下拉菜单中选择其他选项，则它不会更新国家和城市。

试图像这样在 app.component.html 上查看，此处已更新。

<p>Selected country: {{ country }}</p><br>
<p>Selected city: {{ city }}</p>

例如-

第一次，如果我从国家/地区选择“美国”，从城市中选择“纽约”。正确传递参数。

第二次，如果我将城市更改为“奥斯汀”，则其未将“奥斯丁”传递给组件（城市值未更新/更改）。

请帮助/指导。

Answer 1

您的样品工作正常。只需在render.component.html中添加以下代码，即可查看绑定是否正常工作

{{国家}}-{{城市}}

供您参考，ngOnInit仅在首次初始化组件时运行（在您的情况下是第一次选择城市时）。每次绑定更改时都不会触发。要记录每个绑定更改，您应该在console.log生命周期中添加ngOnChanges()

更新了StackBlitz上的示例以说明：https://stackblitz.com/edit/angular-zbzahn

Answer 2

在我看来，一切都在您的堆叠闪电战中如期进行。如果要查看控制台中的更改，则应将日志放入ngOnChanges()

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

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

  @Input()
  public country: String;

  @Input()
  public city: String;


  constructor() { }

  ngOnChanges() {
    console.log("country : ", this.country);
    console.log("city : ", this.city);
  }

}

这样，您的城市@Input每次更新时，控制台都会记录日志。

下拉菜单更改后组件参数不变

2 个答案: