我试图以模态形式显示每个项目的详细信息,但我不知道如何实现打字稿文件或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">×</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>
所以我想说的是显示包含每个项目数据的每个模态,然后单击那只眼睛。 预先感谢!