Question

我正在尝试将更改事件添加到我当前组件中引用的外部下拉列表组件（正在其他组件中使用）。但是，由于某种原因，它会给我一个错误，如下所示：无法读取属性＆＃39; __ zone_symbol__addEventListener＆＃39;未定义的。以下是供您参考的示例代码。

外部组件代码 -

city.html

<mat-form-field>
  <mat-select placeholder="Select Country" >
    <mat-option *ngFor="let country of countries" [value]="country.id">
        {{ country.name }}
    </mat-option>
 </mat-select>
</mat-form-field>

city.component.ts

@Component({
  selector: 'app-citylist',
  templateUrl: './citylist.component.html'
})
export class CitylistComponent implements OnInit {

  cities : City[];  

  constructor(private citylistService : CitylistService) { }

  ngOnInit() {
     this.getCities();    
  }

  getCities() : void{    
     this.cityListService.getCities().subscribe(resultArray => this.cities = 
     resultArray,
     error => console.log("Error :: " + error));
  }
}

当前组件代码：

temp.html

<app-citylist #Citylist (ngModelChange)="onVenueChange(selectedCity)" 
    formControlName="selectedCity" name="selectedCity" required 
    ngDefaultControl></app-citylist>

temp.component.ts

export class tempComponent implements OnInit, AfterViewInit {

ngAfterViewInit(): void {
    this.renderer.listen(this.city1.nativeElement, 'change',(evt)=>{
      alert("It has been clicked");
  }); 
 }
 @ViewChild('Citylist') city1;

 onVenueChange(venueId, formGroup: NgForm ){
      alert("This is test");       
 }
}

我是否采取了正确的方法？有人可以建议吗？

Answer 1

我在这种方法中看到了这样的不完善之处：

您想为angular testComponent设置更改事件处理程序。但即使是通常的方式，你也应该在其中定义名称为'change'的输出。
您尝试将处理程序添加到native元素，但您应该为angular组件本身执行此操作。
实际更改事件由子组件mat-select生成，因此您应该将更改事件处理程序放在那里并在更高级别上发出值。

您的方法将无法按现在的方式运作

如何将角度4中的更改事件动态添加到外部下拉列表组件

1 个答案: