Angular Material UI Dialog 為彈出的對話框提供數據

Question

我正在使用 Material Ui ( https://material.angular.io/components/dialog/overview ) 在 Angular 中創建一個刪除確認對話框。 我正在遵循上述文檔中的邏輯。 但我遇到了一些錯誤。 我以為我可以將列表中的一些數據提供給我的刪除確認對話框，但似乎我以錯誤的方式處理它。 我將提供我的代碼和我得到的錯誤。 用戶流程是用戶可以刪除技能--> 將彈出刪除確認對話框需要該技能名稱--> 確認后將刪除該技能（女巫需要技能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();

  }

}

dialog-delete-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();

  }

}