Angular 材质 UI 对话框将数据提供给弹出的对话框

Question

我正在 Angular 中使用 Material Ui ( https://material.angular.io/components/dialog/overview) 创建一个删除确认对话框。我遵循上面文档中的逻辑。但是我运行遇到了一些错误。我想我可以将我的列表中的一些数据提供给我的删除确认对话框，但我似乎以错误的方式处理它。我将提供我的代码和我得到的错误。用户流程是用户可以删除技能 --> 弹出删除确认对话框，需要技能名称 --> 确认后将删除技能（需要技能 id）并返回到技能列表

技能列表-component.html

            <div *ngIf="skills$ | async as skills else noData">
                <div class="skill-item" *ngFor="let skill of skills">
                    <mat-card class="skill-name">
                        <mat-card-title>{{skill.name}}</mat-card-title>
                    </mat-card>
                    <mat-card class="edit-skill">
                        <a>
                            <mat-icon class="icon">create</mat-icon>
                        </a>
                    </mat-card>
                    <mat-card class="delete-skill">
                        <a>
                      <mat-icon class="icon" (click)="openDialog(skill)">delete</mat-icon>       
                        </a>
                    </mat-card>
                </div>
            </div>

技能列表-component.ts

export interface DialogData {
 skill: [];
}

@Component({
  selector: 'app-skill-list',
  templateUrl: './skill-list.component.html',
  styleUrls: ['./skill-list.component.scss'],
})
export class SkillListComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute, private api: ApiService, public dialog: MatDialog) {}
  skills$;
  private sub: any;
  consultantId: number;

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.consultantId = Number(params['id']);
      this.skills$ = this.api.getAllSkills(this.consultantId).subscribe(response => {
        console.log(response);
      });
    });
  }

  navigateSkillAdd() {
    this.router.navigate([`skillplatform/${this.consultantId}/add`]);
  }

  openDialog(skill){
    const dialogRef = this.dialog.open(DialogDeleteConfirm,{
      width: '250px',
      data: { skill}
    })
  }


}

@Component({
  selector: 'dialog-delete-confirm',
  templateUrl: 'dialog-delete-confirm.html',
})
export class DialogDeleteConfirm {

  constructor(
    public dialogRef: MatDialogRef<DialogDeleteConfirm>, private api :ApiService, private router: Router, @Inject(MAT_DIALOG_DATA) public data: DialogData ) {}


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

  deleteSkill(skillId , consultantId) {
    this.api
      .deleteSkill(skillId)
      .subscribe(response => console.log('DELETE skill from skills response: ', response ));
      this.router.navigate([`skillplatform/${consultantId}/add`]);
      this.dialogRef.close();

  }

}

对话框-删除-confirm.html

<div mat-dialog-content>
  <p>Are you sure you want to delete</p>
  <p>"{{skill.name}}" from skill list?</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button (click)="deleteSkill(skill.id, skill.consultantId)">Yes, I"m sure</button>
</div>

错误

ERROR in src/app/skill-platform/components/skill-list/dialog-delete-confirm.html:4:9 - error TS2339: Property 'skill' does not exist on type 'DialogDeleteConfirm'.

4   <p>"{{skill.name}}" from skill list?</p>
          ~~~~~

  src/app/skill-platform/components/skill-list/skill-list.component.ts:45:16
    45   templateUrl: 'dialog-delete-confirm.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DialogDeleteConfirm.
src/app/skill-platform/components/skill-list/dialog-delete-confirm.html:8:43 - error TS2339: Property 'skill' does not exist on type 'DialogDeleteConfirm'.

8   <button mat-button (click)="deleteSkill(skill.id, skill.consultantId)">Yes, I"m sure</button>       
                                            ~~~~~

  src/app/skill-platform/components/skill-list/skill-list.component.ts:45:16
    45   templateUrl: 'dialog-delete-confirm.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DialogDeleteConfirm.
src/app/skill-platform/components/skill-list/dialog-delete-confirm.html:8:53 - error TS2339: Property 'skill' does not exist on type 'DialogDeleteConfirm'.

8   <button mat-button (click)="deleteSkill(skill.id, skill.consultantId)">Yes, I"m sure</button>       
                                                      ~~~~~

  src/app/skill-platform/components/skill-list/skill-list.component.ts:45:16
    45   templateUrl: 'dialog-delete-confirm.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DialogDeleteConfirm.

谁能告诉我如何以正确的方式完成这项工作？

Answer 1

这是你的答案

@Component({
  selector: 'dialog-delete-confirm',
  templateUrl: 'dialog-delete-confirm.html',
})
export class DialogDeleteConfirm  {

  constructor(
    public dialogRef: MatDialogRef<DialogDeleteConfirm>, private api :ApiService, private router: Router, @Inject(MAT_DIALOG_DATA) public data: DialogData ) {
**console.log(this.data) // here in data you will get skills data**
}


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

  deleteSkill(skillId , consultantId) {
    this.api
      .deleteSkill(skillId)
      .subscribe(response => console.log('DELETE skill from skills response: ', response ));
      this.router.navigate([`skillplatform/${consultantId}/add`]);
      this.dialogRef.close();

  }

}

Angular 材质 UI 对话框将数据提供给弹出的对话框

Angular Material UI Dialog give data to dialog pop up

dialog

mate

angular