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>

但按下“是”按钮时，肯定会出现以下错误：

错误类型错误：_co.article未定义

我知道原因。实际上，

（单击）=“display=false；onPress（article.articleid）”

在模式中不知道

article.articleid

---

如何通过那里的

articleid

。请帮帮我。我的整个逻辑都错了吗？

最简单的解决方案是只存储触发模式的

文章

对象

在这种情况下，重新使用

显示
变量：

将类型更改为
any
将单击的实体分配给
显示
然后，您可以在单击侦听器中使用
显示
变量属性

你确定吗？
当然可以
不，别管它！
您可以设置一个变量来存储已单击帖子的id。因此，在单击“删除”时，将id分配给该变量，并在确认后使用该变量来删除帖子

article.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(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>

在组件中定义名为
articleId
的变量：

articleId:number;

然后将您的
articleId
传递给showDialog方法
HTML:

现在，在yuronPress方法中，您必须使用
articleId
如下所示：

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

由
*ngFor=“let article of articles”
表示的
Modal
中的
文章
超出了范围，因此我将其移动到了正确的
分区
。我在按钮上添加了一个
*ngIf=“article
，只是为了确保您不一定需要它



{{文章标题}
删除
{{文章日期}
你确定吗？
当然可以
不，别管它！
感谢所有花时间和精力帮助我的人。：-）
<!-- MODAL -->
<p-dialog header="Deleting this article!" [(visible)]="display" [modal]="true" [responsive]="true" ...>
    <span>Are you sure?</span>
    <p-footer>
        <button ... (click)="display=undefined; onPress(display.articleid)" label="Yes">Yes, Sure</button>
        <button ... (click)="display=undefined" label="No">No, leave it!</button>
    </p-footer>
</p-dialog>

<!-- 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>

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;
 }     

  }
}

articleId:number;

   <a (click)="showDialog(article)" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Delete</a>

 showDialog({articleid}) {
      this.display = true;
      this.articleId=articleid; // new 
  }

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