No Angular 8, como passar dados dinâmicos de um observável para um diálogo modal?

maraxai

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();
  }
}
Bogdan B

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.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

No Angular 8, como passar dados dinâmicos de um observável para um diálogo modal?

Como passar dados dinâmicos de um arquivo blade como um suporte para um componente vue?

Existe alguma maneira de passar dados dinâmicos para um componente no Angular?

Como posso passar dados de um fragmento de host para fragmento de diálogo no kotlin?

Como passar e acessar dados de um componente de diálogo no angular?

Como vincular dados dinâmicos em um modal de bootstrap

Como vincular dados dinâmicos em um modal de bootstrap

Como passar dados para diálogo de material angular 2

como passar um valor para outro componente de diálogo em angular

Como posso passar dados de um cartão, em uma lista de cartões, para um diálogo?

Como passar dados com classe de dados de um fragmento de diálogo para outro fragmento com interface em kotlin?

Como posso passar um valor de propriedade de uma função para uma caixa de diálogo 'modal' no React?

Como passar uma fonte de imagem para um diálogo modal no Vue (a fim de ampliar a imagem clicada)?

como passar dados dinâmicos de pai para filho no angular2 +

Como passar um parâmetro para um modal em Angular

Angular 8 passando dados dinâmicos para a rota ativada em um tipo de configuração (lista de detalhes)

Maneira correta de passar dados de um observável para outro

passar dados entre uma atividade para um fragmento de diálogo

VueJS Como passar dados para um componente modal usando eventbus

VueJS Como passar dados para um componente modal usando eventbus

Como passar dados para um componente modal vuestrap

Como passar dados para o componente angular usando o componente de diálogo nebular?

Angular - Como retornar um observável de outro observável

Como passar dados no angular de diálogo 4

Como passar o atributo de dados de um botão para o modal correspondente

Existe uma maneira de passar o modelo de exibição existente como um contexto de dados para a janela de diálogo aberta recentemente, ao usar o autofac?

Como posso passar e receber dados de / para um modal ngx-bootstrap?

Angular: como passar dados de um componente para outro componente sem passar por HTML?

Angular: como passar dados de um componente para outro componente sem passar por HTML?

TOP lista

quentelabel

Arquivo