如何在模态中显示每个项目的详细信息?

时间:2018-07-12 09:53:12

标签: angular

我试图以模态形式显示每个项目的详细信息,但我不知道如何实现打字稿文件或html。

您有任何简单的例子可以帮助我吗? 这是我的html部分:

     <div style="margin-top: 0px;" class="panel panel-primary">
      <div class="panel-heading">Pans :
           <button  style="float: right; width: 50px ; height: 28px;" 
          routerLink="/new-pan"><span class="glyphicon glyphicon-plus"> 
       </span></button> </div>
    <div class="panel-body">
<div class="row">
  <div class="col-md-2"  >
    <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 pagePans?.content">
            <h3 mat-line >{{p.id}}- {{p.nom}}</h3>
           // this is where i want it to be : on clicking on the eye :
    <p class="text-right"><a href="#modal-advanced" data-toggle="modal" 
    class="link-white"><span class="clickable" style="color: #cccccc;" 
   class="glyphicon glyphicon-eye-open clickable"></span></a></p>

          </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>
  </div>
  <div class="col-md-10">
    <agm-map [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
      <agm-marker [latitude]="p.latitude" [longitude]="p.longitude" *ngFor="let p of pagePans?.content; let i=index">
        <agm-snazzy-info-window [maxWidth]="800" [closeWhenOthersOpen]="true">
          <ng-template>
            <strong>{{p.nom}}</strong><br>
            <h5>Status:{{p.etat}} </h5>
            <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deletePan(p)" ></button>
            <button  class="glyphicon glyphicon-pencil" (click)="onEditPan(p.id)" ></button>

          </ng-template>
        </agm-snazzy-info-window>
      </agm-marker>
    </agm-map></div>
  </div>

          

这是模态(只是一个示例,用于测试数据是否显示)

     <div class="modal fade" id="modal-advanced" >
        <div class="modal-dialog ">
       <div class="modal-content">
        <form>
        <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria- 
      label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Advanced Resume Search</h4>
    </div>
    <div class="modal-body">
      <h5>More details :</h5>
      <h3 class="no-margin-top"><a href="resume_details.html" class=""> 
      {{p.id}}- {{p.nom}} <i class="fa fa-link color-white-mute font-1x"> 
      </i></a></h3>
      <h5><span class="color-black">{{p.adresse}}</span></h5>
       <p>{{p.localite}}- <span class="color-white-mute"> </span> <br/>
        <span>etat :{{p.adresse}}</span>
      </p>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-default btn-theme" data- 
      dismiss="modal">Close</button>
      <button type="submit" class="btn btn-success btn-theme">Check 
       in</button>
    </div>
  </form>
</div>

         

所以我想说的是显示包含每个项目数据的每个模态,然后单击那只眼睛。 预先感谢!

0 个答案:

没有答案