Question

我正在使用一个Angular应用程序，它将一些数据显示在dataGrid中，如下所示。

<p-dataGrid [value]="docs" [paginator]="true" [rows]="8">
  <ng-template let-doc pTemplate="item">
    <div class="ui-g-12 ui-md-3">
      <span>{{doc.title}}</span>
    </div>
  </ng-template>
</p-dataGrid>

我正在尝试添加一个按钮，单击该按钮会显示有关所选文档的一些信息。我这样做了：

<p-dataGrid [value]="docs" [paginator]="true" [rows]="8">
  <ng-template let-doc pTemplate="item">
    <div class="ui-g-12 ui-md-3">
      <span>{{doc.title}}</span>
      <button (click)="showDialog(doc.id)" pButton type="button" icon="fas fa-info-circle" iconPos="left" label="Details"></button>
      <p-dialog id="{{doc.id}}" #{{doc.id}} [(visible)]="display" modal="modal" width="300" [responsive]="true">
        <p>{{doc.title}}</p>
      </p-dialog>
    </div>
  </ng-template>
</p-dataGrid>

在我的组件中，我添加了一个函数：

display: boolean = false;
showDialog(id: string) {
  alert(id);
  this.display = true;
}

问题是因为我使用相同的变量（“display”）来控制所有对话框的可见性，浏览器会丢失它应显示/隐藏的对话框。一般来说，它使用最后一个。

由于进入屏幕的元素数量是可变的，我无法创建display1，display2，displayN变量。所以我的疑问是，如何动态控制元素的可见性？

我尝试过没有运气的事情：

showDialog(id: string) {
  var e = document.getElementById(id);
  e.attributes['ng-reflect-visible'].value = true;
}

Answer 1

无需创建与文档一样多的p-dialog元素。只有一次应该足够了。因此，如果您在p-dialog之外提取您的p-datagrid，则HTML代码将变为类似：

<p-dataGrid [value]="docs" [paginator]="true" [rows]="8">
  <ng-template let-doc pTemplate="item">
    <div class="ui-g-12 ui-md-3">
      <span>{{doc.title}}</span>
      <button (click)="showDialog(doc.id)" pButton type="button" icon="fas fa-info-circle" iconPos="left" label="Details"></button>
    </div>
  </ng-template>
</p-dataGrid>

<p-dialog id="dialog" [(visible)]="display" modal="modal" width="300" [responsive]="true">
        <h1>{{selectedDoc.title}}</h1>
        Details : {{selectedDoc.details}}
</p-dialog>

单击按钮时分配selectedDoc：

showDialog(id: string) {
    this.selectedDoc = this.docs[id-1];
    this.display = true;
}

这是一个有效的Plunker

将多个对话框添加到单个页面中

1 个答案: