在Mat对话框组件中未定义@输入数据

问题描述

我正在尝试在Mat对话框中显示3个字符串数据项，我有一个namecard.component，在这里我接受3个输入并将它们发送到app.component，在这里处理数据的地方我有一个函数在namecard.component中启动Dialog函数。我还使用@input装饰器将2个字符串变量发送到namecard.component。我将这两个@input字符串与本地字符串一起发送到dialog.component。 @input字符串之一已定义，但另一个在this.dialog.open被调用时未定义。我是Angular和编码的新手，所以这使我有些不满，任何帮助将不胜感激。

我怀疑这是在调用OpenDialog时DragonName数据不可用的情况，但是我从app.component执行console.log并定义了它。所以我不确定为什么一个@input变量可用而另一个不可用。欢呼

app.component.ts

import { Component,Injectable,Output,EventEmitter,ViewChild } from '@angular/core';
import { AngularFireDatabase,AngularFireList,AngularFireObject} from '@angular/fire/database';
import { Observable,concat } from 'rxjs';
import { map,timeout } from 'rxjs/operators';
import { NamecardComponent } from './namecard/namecard.component';
import {NameHistoryComponent} from './name-history/name-history.component';
import { async } from '@angular/core/testing';
import { DragonDialogComponent } from './dragon-dialog/dragon-dialog.component';
import {MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],})
export class AppComponent {
  title = 'WOF-NG';
 
  public tribe: string;
  public dragonName: string;


@ViewChild(NamecardComponent,{static: false}) child:NamecardComponent;

  constructor(private db: AngularFireDatabase) {
    
    this.namesHistory = db.list('/history');
   
      
   
  } 

      
      DragonResult() {
        console.log('passed to dragonresult')
        var promise = new Promise((resolve,reject) => {
          this.testFunction();
          setTimeout(() => {
            
            
            if (error) {
              reject();
            } else {
       
              
              resolve();
           }
      },1000);
      });
      return promise;
       }
      
      doThisTask(){
        this.DragonResult().then(
          ()=> this.presentName())
          .then(
          ()=> console.log('Final dragon name:'+ this.dragonName+this.tribe)
          )
        .then(
        () => this.child.openDialog()
        );
     ```

app.component.html

<app-namecard [dragonName]="dragonName" [tribeName]="tribe" (messageEvent)="receiveMessage($event)"></app-namecard>

namecard.component.ts

import { Component,OnInit,Input,ViewChild,NgModule } from '@angular/core';
import {MatDialogConfig,MatDialogRef,MatDialog,MAT_DIALOG_DATA} from '@angular/material';
import {DragonDialogComponent} from '../dragon-dialog/dragon-dialog.component'

interface Month {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-namecard',templateUrl: './namecard.component.html',styleUrls: ['./namecard.component.scss']
})


export class NamecardComponent implements OnInit{
  
  ngOnInit(){
 
  
  }
  
 
  
  
name: string;


constructor(public dialog: MatDialog) { 
  


 }
 @ViewChild('f',{static: false}) form: any;

@Output() public messageEvent = new EventEmitter<{fname:string,lname: string,bmonth: string}>(); 
 
  
 @Input() dragonName: string;
 @Input() tribeName: string;
 
 
  sendMessage(fMessage,lMessage,month) {    
    this.messageEvent.emit({fname:fMessage,lname:lMessage,bmonth:month});
   

  }

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.panelClass = 'custom-dialog-container'
    dialogConfig.maxHeight= '300px'
    dialogConfig.maxWidth ='400px';
    dialogConfig.hasBackdrop = true;
    dialogConfig.data = {name: this.name,dragonName: this.dragonName,tribe: this.tribe};
    
    console.log('dialog name' + this.name+ this.dragonName +this.tribeName)
    const dialogRef = this.dialog.open(DragonDialogComponent,dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      
    });
  }
}

dialog.component.ts

import { Component,Inject,Input } from '@angular/core';
import {MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';
import {NamecardComponent} from '../namecard/namecard.component';




export interface DialogData {
  dragonName: string;
  name: string;
  tribe: string;
}
 
@Component({
  selector: 'app-dragon-dialog',templateUrl: './dragon-dialog.component.html',styleUrls: ['./dragon-dialog.component.scss']

})



export class DragonDialogComponent  {
local_data: any;

constructor(
  public dialogRef: MatDialogRef<NamecardComponent>,@Inject(MAT_DIALOG_DATA) public data: DialogData) {
    console.log('dialog constructor' + data.name+ data.dragonName +data.tribe);
this.local_data = {...data};

}

onNoClick(): void {
  this.dialogRef.close();
}



}

dialog.component.html

local_data.name和local_data.tribe已定义，但local_data.dragonNmae未定义。但它是在调用openDialog（）函数之前在app.component中定义的。

    <div *ngIf = "local_data.name">
    <mat-card class="dragon-name">
        <mat-card-header>
          <div mat-card-avatar class="example-header-image"></div>
          <mat-card-title class="dragon-text">Congratulations {{local_data.name}} 
              <div>Your Dragon name is:</div>
          </mat-card-title>
          <label class="response">{{local_data.dragonName}}</label>
        </mat-card-header>
        
        
       
       <mat-card-content>
        <p class="tribe">
            <label>Tribe: </label>
            <label class="response2">{{local_data.tribe}}</label>
           </p>
</mat-card-content>
</mat-card>
<pre>{{data | json}}</pre>
</div>


    

  

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）