Angular Material UI Dialog дает данные всплывающему окну - PullRequest
Новая
       27

Angular Material UI Dialog дает данные всплывающему окну

0 голосов
/ 19 марта 2020

Я создаю диалоговое окно подтверждения удаления в Angular с Material Ui (https://material.angular.io/components/dialog/overview). Я следую логи c из документации выше. Но я столкнулся с некоторыми ошибками. Я думал, что смогу передать некоторые данные из своего списка в диалоговое окно подтверждения удаления, но, похоже, я поступаю неправильно. Я предоставлю свой код и ошибки, которые я получаю. Поток пользователей будет таким, что пользователь может удалить навык -> появится диалоговое окно подтверждения удаления, для которого требуется имя навыка -> после подтверждения удалит навык (ведьма нуждается в идентификаторе навыка) и вернется к списку навыков

skill-list-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>

skill-list-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();

  }

}

диалог-удаление-подтверждение. 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.

Может ли кто-нибудь сказать мне, как я могу выполнить sh этот правильный путь?

1 Ответ

1 голос
/ 19 марта 2020

Вот ваш ответ 

@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();

  }

}
...