在Angular 8中,如何将动态数据从可观察值传递到模态对话框?

在Angular 8中,我想实现一个Angular-Material Modal-Dialog。单击用户图像后,用户数据应以模式显示。我无法将可观察的动态数据从Profile组件传递到Profile-Modal组件。 为了进行测试,我在Profile.component.ts的ngOnInit()中订阅了observable,数据对象的数组已正确控制台记录。如果在openDialog()中使用相同的订阅来打开“模态对话框”,则会收到此错误消息: 找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables,例如数组。     在NgForOf.ngDoCheck

profile.component.ts: (在profile.component.html中,一切正常,* ngFor =“ let member of member”正常工作,通过插值,我得到了数据,即{{member.name}})

import { Component,OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

import { MatDialog } from '@angular/material';
import { ProfileModalComponent } from '../profile-modal/profile-modal.component';

@Component({
  selector: 'app-profile',templateUrl: './profile.component.html',styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  observableData: observableData[] = [];
  members: Observable<any[]>;

  constructor(db: AngularFirestore,public dialog: MatDialog) {
    this.members = db.collection('members').valueChanges();
  }

  openDialog(): void {
    let observableData = this.members.subscribe(members => members);
    this.dialog.open(ProfileModalComponent,{
      width: '80%',height: '80%',data: {data: observableData}
    });
  }
  // logs the array with the objects
  ngOnInit() {
    const members = this.members.subscribe(
      member => console.log(member)
    )
  }
}

profile-modal.component.ts:

import { Component,Inject,Input } from '@angular/core';
import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-profile-modal',templateUrl: 'profile-modal.component.html',styleUrls: ['profile-modal.component.css']
})
export class ProfileModalComponent {
  constructor(public dialogRef: MatDialogRef<ProfileModalComponent>,@Inject(MAT_DIALOG_DATA) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}
pf030232 回答:在Angular 8中,如何将动态数据从可观察值传递到模态对话框?

我认为您可以在收到如下数据后打开模式:

openDialog(): void {
   this.members.subscribe(members => {
      this.dialog.open(ProfileModalComponent,{
        width: '80%',height: '80%',data: {data: members }
      });
   });
 }

尝试一下可以解决问题。

,

更新
看完您的堆栈闪电之后,我在这里为您的问题创建了修复程序 https://stackblitz.com/edit/angular-vwhas1


问题出在您的* ngFor。应该是let member of data.data
因为您已分配了可观察对象,如下所示:
data: {data: observableData},这意味着您可以在模态/对话框组件中通过data.data

进行访问

您的固定代码

<fa-icon id="closeModal" class="icon" [icon]="faTimes" (click)="onNoClick()">
</fa-icon> 
<div class="container"> 
 <h1 mat-dialog-title>Profil</h1> 
 <div mat-dialog-content> 
  <div class="member" *ngFor="let member of data.data"> 
   <span>NAME: </span> 
   <span>{{member.name}}</span>
  </div> 
 </div> 
</div>
本文链接:https://www.f2er.com/3118901.html

大家都在问