Angular2 渲染 [style.display]

<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="width: 300px"/>
            <textarea rows="4" nz-input  [disabled]="false" [style.display]="displays == true?'block':'none'" style="width: 300px"></textarea>
            <div class = "nzTitles">
              <!-- <div class = "imgBlock"></div>        picPath -->
              <img [src] = "item.picPath" style="width: 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\n]/);
          }
        } else {
          this.msg.info(result['msg']);
          return;
        }
      }, error => {
        console.error('topic select error');
      }
    );

  

posted on 2020-04-15 11:08  左侧岚  阅读(362)  评论(0编辑  收藏  举报

导航