zoukankan      html  css  js  c++  java
  • 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=" 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');
          }
        );
    

      

  • 相关阅读:
    linux中的中断处理框架
    linux中的异常处理流程
    如何使用次设备号控制多个LED
    装载内核模块时,自动添加设备文件
    第一个字符设备驱动程序
    网络文件系统
    点击全选或全不选,一个页面有多个全选和全不选的时候
    ubuntu 20.04 遇到的问题
    Ubuntu20.04 初始没有的东西
    Ubuntu 20 安装pycharm备忘
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12703943.html
Copyright © 2011-2022 走看看