带有项目列表的模式

Question

我正在使用 angular 5 和 spring Boot。我有一个项目列表，我想通过模态显示它们的详细信息。这意味着如果我单击任何项​​目，模式将包含该项目的详细信息。 有人知道如何实现吗？

这是我的清单：

   <mat-card>
      <mat-card-content>
        <div class="form-group">
          <input type="text" style="width: 110px;" placeholder="Search" [(ngModel)]="motCle" aria-label="Search">
          <button  (click)="chercher()"> <span class="glyphicon glyphicon-search"></span></button>
        </div>
        <mat-list>
          <mat-list-item style="color: black;" *ngFor="let p of pans">
            <h3 mat-line >{{p.id}}- {{p.nom}}</h3>
            <span class="clickable" style="color: #cccccc;" class="glyphicon glyphicon-eye-open clickable"></span>
          </mat-list-item>
          <div style="float: left" class="container">
            <ul  style="background-color: transparent;" class="nav nav-pills">
              <li  [ngClass]="{'active':i==currentpage}" *ngFor="let p of pages; let i=index">
                <a style="color: #cccccc;" class="clickable" (click)="gotoPage(i)">{{i}}</a>
              </li>
            </ul>
          </div>
        </mat-list>
      </mat-card-content>
    </mat-card> 

Answer 1

带材质对话框：https://material.angular.io/components/dialog/overview

html

<mat-list-item style="color: black;" *ngFor="let p of pans">
            <h3 mat-line >{{p.id}}- {{p.nom}}</h3>
            <span (click)="openDetail(p)" class="clickable" style="color: #cccccc;" class="glyphicon glyphicon-eye-open clickable"></span>
          </mat-list-item>

ts

openDetail(pan) {
   const dialogRef = this.dialog.open(yourDialogComponent, {
      data: { pan: pan},
    });
}

查看 Angular Material 文档以创建对话框组件