Angular 对话框 return 列表中的值

Question

我有本地数据 json api 。我想在用户单击任何项目列表时从对话框组件中获取 return 值。我的错误是 Error: No value accessor for form control with unspecified name attribute 同样当我关闭对话框时 l return data: undefined。

代码

export class WeatherStationsNameComponent implements OnInit {
  items: any
  cities:any

constructor(
    public dialogRef: MatDialogRef<WeatherStationsNameComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: any) 

  ngOnInit() {
  }

  closeDialog(){ 
    this.dialogRef.close({event:'close',data:this.cities}); 
  }
}

html

<ul class="list-group" *ngFor="let station of items.data; let i=index " style="
direction: ltr;color: black;text-align: right">

    <li class="list-group-item" (click)="closeDialog()"
     [(ngModel)]="cities" [value]="station.city.coords">
     {{ station.city.cityname.id}}
</li>

</ul>

Answer 1

你可以做到

export class WeatherStationsNameComponent implements OnInit {
  items: any
  cities:any

constructor(
    public dialogRef: MatDialogRef<WeatherStationsNameComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: any) 

  ngOnInit() {
  }

  closeDialog(dataItem){ 
    this.dialogRef.close({event:'close',data:dataItem}); 
  }
}

html

<ul class="list-group" *ngFor="let station of items.data; let i=index " style="
direction: ltr;color: black;text-align: right">

    <li class="list-group-item" (click)="closeDialog(station.city.coords)">
     {{ station.city.cityname.id}}
</li>

</ul>

Angular 对话框 return 列表中的值

Angular Dialog return value from list

modal-dialog

angular