angular - 如何将参数传递给 Angular 中的模态

Question

我正在用 Angular 做一个小型的博客写作项目来练习。我将使用删除按钮在屏幕上显示所有文章卡。当用户按下删除按钮时，应打开一个模式要求确认。这是代码:

articles.component.html

<!-- CARD -->
<div class="row mt-5">
    <div class="col-md-4 mb-3" *ngFor="let article of articles; let i = index;">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">{{article.title}}</h5>
                <a (click)="showDialog()" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Delete</a>
            </div>
            <div class="card-footer text-muted">
                {{article.date}}
            </div>
        </div>
    </div>
</div>

<!-- MODAL -->
<p-dialog header="Deleting this article!" [(visible)]="display" [modal]="true" [responsive]="true" ...>
    <span>Are you sure?</span>
    <p-footer>
        <button ... (click)="display=false; onPress(article.articleid)" label="Yes">Yes, Sure</button>
        <button ... (click)="display=false" label="No">No, leave it!</button>
    </p-footer>
</p-dialog>

截图如下:

这是我的逻辑:article.component.ts

import { Component, OnInit } from '@angular/core';
...    
@Component({
  ...
})
export class ArticleComponent implements OnInit {
  
  articles = []; // contains title, date, articleid

  constructor(..., private _articleService: ArticleService) { }

  display: boolean = false;

  showDialog() {
      this.display = true;
  }   
 
  ngOnInit() {
    // logic to populate this.articles[] array 
  }

  onPress(id) {        
    this._articleService.deleteArticle(id)
    .subscribe (
      data => {
        console.log("deleted");
      }
    );
  }
}

但是在按下 Yes, sure 按钮时我收到了这个错误:

ERROR TypeError: _co.article is undefined

我知道原因。实际上 (click)="display=false; onPress(article.articleid)" 在模态中不知道 article.articleid。

如何在那里传递 articleid。请帮我。我的整个逻辑是错误的吗？

Answer 1

您可以设置一个变量来存储被点击的帖子的 ID。因此，在单击删除时将 Id 分配给该变量，并在确认后使用它来删除帖子

文章.组件.html

<!-- CARD -->
<div class="row mt-5">
    <div class="col-md-4 mb-3" *ngFor="let article of articles; let i = index;">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">{{article.title}}</h5>
                <a (click)="showDialog(article.Id)" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Delete</a>
            </div>
            <div class="card-footer text-muted">
                {{article.date}}
            </div>
        </div>
    </div>
</div>

<!-- MODAL -->
<p-dialog header="Deleting this article!" [(visible)]="display" [modal]="true" [responsive]="true" ...>
    <span>Are you sure?</span>
    <p-footer>
        <button ... (click)="display=false; onPress(true)" label="Yes">Yes, Sure</button>
        <button ... (click)="display=false" onPress(false) label="No">No, leave it!</button>
    </p-footer>
</p-dialog>

文章.组件.ts

import { Component, OnInit } from '@angular/core';
...    
@Component({
  ...
})
export class ArticleComponent implements OnInit {
  
  articles = []; // contains title, date, articleid

  constructor(..., private _articleService: ArticleService) { }

  display: boolean = false;
  deletePostId:number;
  showDialog(id) {
      this.display = true;
      this.deletePostId=id
  }   
 
  ngOnInit() {
    // logic to populate this.articles[] array 
  }

  onPress(isDelete) { 
    if(isDelete && deletePostId)  {
    this._articleService.deleteArticle(this.deletePostId)
    .subscribe (
      data => {
        console.log("deleted");
      }
    );
 }else{
  this.deletePostId = null;
 }     

  }
}