No Angular 8, quero implementar um Diálogo Modal de Angular-Material. Ao clicar na imagem de um usuário, os dados do usuário devem ser exibidos no modal. Não consigo passar os dados dinâmicos do observável do componente Perfil para o componente Perfil-Modal. Para teste, eu me inscrevi no observável no ngOnInit () de Profile.component.ts, a matriz de objetos de dados é registrada no console corretamente. Se eu usar a mesma assinatura em openDialog () que serve para abrir o Modal-Dialog, recebo esta mensagem de erro: Não é possível encontrar um objeto de suporte diferente '[objeto Objeto]' do tipo 'objeto'. NgFor oferece suporte apenas a Iterables, como Arrays. em NgForOf.ngDoCheck
profile.component.ts: (em profile.component.html tudo funciona corretamente, * ngFor = "deixar membro dos membros" funciona corretamente e com interpolação eu obtenho os dados, ou seja, {{nome do membro}})
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();
}
}
ATUALIZAÇÃO
Depois de dar uma olhada no seu stackblitz, criei uma solução para o seu problema aqui https://stackblitz.com/edit/angular-vwhas1
O problema está no seu * ngFor. Deve ser let member of data.data
.
Porque você atribuiu o observável como este:,
data: {data: observableData}
isso significa que em seu componente modal / diálogo, você pode acessá-lo pordata.data
Seu código fixo
<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>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras