Question

我正在使用Angle 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文档以创建dialogComponent

带项目清单的模态

1 个答案: