Angular中如何从父组件向自动完成子组件传递数据

现有代码问题分析 #

1. 父组件onExistingUserChange方法未接收点击事件传递的existingUser参数（若需根据用户动态获取时区则需完善）
2. 子组件未监听输入属性timeZone的变化，导致父组件传递的值无法同步到子组件的自动完成控件
3. 子组件同时混用formControl与ngModel，易引发绑定冲突

修复步骤 #

1. 完善父组件事件处理（可选，按需动态获取时区）

如果需要根据选中的用户动态匹配时区，先补全参数接收逻辑：

// Parent Component TS
onExistingUserChange(existingUser: string) {
  // 示例：根据选中用户设置对应时区，可替换为接口请求或本地数据匹配逻辑
  this.timeZone = "India Standard Time";
}

2. 子组件监听输入属性变化，同步更新控件

子组件通过ngOnChanges监听timeZone的变化，自动更新自身的表单控件值，同时建议统一使用表单控件避免绑定冲突：

子组件TS修改

import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-time-zone',
  templateUrl: './time-zone.component.html',
  styleUrls: ['./time-zone.component.css']
})
export class TimeZoneComponent implements OnChanges {
  @Input() timeZone!: string;
  @Output() newItemEvent = new EventEmitter<string>();
  myControl = new FormControl('');
  timezoneresp: any[] = []; // 你的时区数据源
  filteredOptions: any; // 保留原有过滤逻辑

  ngOnChanges(changes: SimpleChanges): void {
    // 监听timeZone属性变化，同步到表单控件
    if (changes['timeZone']?.currentValue) {
      this.myControl.setValue(changes['timeZone'].currentValue);
    }
  }

  onSelectionChange(): void {
    const selectedZone = this.myControl.value;
    if (!selectedZone) return;
    
    const matchedZone = this.timezoneresp.find(zone => zone.viewValue === selectedZone);
    if (matchedZone) {
      this.newItemEvent.emit(matchedZone.value);
    }
  }
}

子组件HTML优化（移除ngModel，统一用表单控件）

<form class="example-form">
  <mat-form-field appearance="outline" class="pull-right">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">      
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" (click)="onSelectionChange()" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

3. 父组件初始化timeZone变量

确保父组件中timeZone有初始值：

// Parent Component TS
timeZone: string = ''; // 可根据需求设置默认值

内容的提问来源于stack exchange，提问作者Nivedhini Muralidharan