<nz-list class="demo-loadmore-list" [nzDataSource]="lists" [nzItemLayout]="'horizontal'" [nzRenderItem]="item" [nzPagination]="pagination"> <!-- --------------------------------------------------- --> <ng-template #item let-item #index> <!-- <nz-list-item [nzExtra]="extra" class="extra" id="extra"> <nz-list-item-meta [nzTitle]="nzTitle" class="extraList" id="extraList"> --> <nz-list-item [nzExtra]="extra" class="extra" id= {{item}}> <nz-list-item-meta [nzTitle]="nzTitle" class="extraList" id="extraList"> <!-- --------------------------------------------------- --> <ng-template #nzTitle class="nzTitle"> <input nz-input placeholder="Basic usage" [disabled]="false" [style.display]="displays == true?'block':'none'" style=" 300px"/> <textarea rows="4" nz-input [disabled]="false" [style.display]="displays == true?'block':'none'" style=" 300px"></textarea> <div class = "nzTitles"> <!-- <div class = "imgBlock"></div> picPath --> <img [src] = "item.picPath" style=" 40px;height: 40px"/> <a nz-tooltip nzTitle={{item.description}} class="listTitle listTitles" (click)="routerChange('serviceListDetail',item)">{{item.name}}</a> </div> </ng-template> <!-- --------------------------------------------------- --> <ng-template #extra> <div class="describeItemContent describeItemContentKeyWord"> <!-- <span class = "Keywords">关键字 :</span> --> <div class = "Keyword Keywords"> <!-- <nz-tag [nzColor]="'magenta'">magenta</nz-tag> <nz-tag [nzColor]="'red'">red</nz-tag> <nz-tag [nzColor]="'volcano'">volcano</nz-tag> <nz-tag [nzColor]="'orange'">orange</nz-tag> --> <nz-tag *ngFor="let items of item.keyWords">{{items}}</nz-tag> <!-- <nz-tag [nzColor]="itemss.colors">{{itemss.value}}</nz-tag> --> </div> </div> <ul [ngStyle]="{'width': widths? widths + 'px': widths + 'px'}"> <!-- <li class="describeItem">服务名 :<span class = "serviceLeft">service</span></li> --> <li class="describeItem">最新版本 :<span class = "serviceLeft">{{item.latestVersion}}</span></li> <li class="describeItem">服务中心 :<span class = "serviceLeft">{{item.serviceCenter}}</span></li> <li class="describeItem">类别 :<span class = "serviceLeft">{{item.centerType}}</span></li> <!-- <li class="describeItem describeItemKeyWord"><span class = "Keywords">关键字:</span> <div class = "Keyword"> <nz-tag [nzColor]="'magenta'">magenta</nz-tag> <nz-tag [nzColor]="'red'">red</nz-tag> <nz-tag [nzColor]="'volcano'">volcano</nz-tag> <nz-tag [nzColor]="'orange'">orange</nz-tag> </div> </li> --> <li class="describeItem">服务状态 : <span class = "serviceLeft">{{item.serviceStatus}}</span></li> <!-- <li class="describeItem" >调用状态:</li> --> </ul> </ng-template> <!-- --------------------------------------------------- --> </nz-list-item-meta> <!-- <div class="deploy"> <nz-radio-group [(ngModel)]="item.size"> <div> <a><i nz-icon nzType="edit" nzTheme="outline" class="ifontSizeDeploy" nz-tooltip nzTitle="编辑" (click)="edit(item,index)" [style.display]="displays == false?'block':'none'"></i></a> <a><i nz-icon nzType="rest" nzTheme="outline" class="ifontSizeCancelDeploy" nz-tooltip nzTitle="删除" (click)="delete()" [style.display]="displays == false?'block':'none'"></i></a> <a><i nz-icon nzType="check-circle" nzTheme="outline" class="ifontSizeDeploy" nz-tooltip nzTitle="保存" (click)="save()" [style.display]="displays == true?'block':'none'"></i></a> <a><i nz-icon nzType="close" nzTheme="outline" class="ifontSizeCancelDeploy" nz-tooltip nzTitle="取消" (click)="cancel()" [style.display]="displays == true?'block':'none'"></i></a> </div> </nz-radio-group> </div> --> </nz-list-item> </ng-template> <ng-template #pagination> <nz-pagination [(nzPageSize)]="PageSize" [(nzPageIndex)]="PageIndex" [nzTotal]="Total" (nzPageIndexChange)="applyCallServiceList()" (nzPageSizeChange)="applyCallServiceList()" nzShowSizeChanger class="pagination"> </nz-pagination> </ng-template> </nz-list> --------------------------------------------------------------------------------------------- this.httpService.serviceList(datas1).subscribe( result => { if (result['status'] == 'OK') { this.lists = result['data']['list']; for (var i = 0; i < this.lists.length; i++) { this.lists[i].keyWords = this.lists[i].keyWords.split(/[s ]/); } } else { this.msg.info(result['msg']); return; } }, error => { console.error('topic select error'); } );