select-trigger.component.html

<!--选择阈值-->
<nz-modal [nzWidth]="900" [(nzVisible)]="isVisiable" [nzTitle]="'选择阈值'" [nzFooter]="null" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <div nz-row [nzGutter]="4" class="search-form">
    <div nz-col nzSpan="4"></div>
    <div nz-col nzSpan="4">
      <input (keyup.enter)="getwebList()" type="text" nz-input [(ngModel)]="obj.name" placeholder="输入阈值名称">
    </div>
    <div nz-col nzSpan="6">
      <nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getHost()">
        <ng-container *ngFor="let item of groupList">
          <nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
        </ng-container>
      </nz-select>
    </div>
    <div nz-col nzSpan="6">
      <nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" [(ngModel)]="obj.hostid" (ngModelChange)="getwebList()">
        <ng-container *ngFor="let item of hostList;">
          <nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
        </ng-container>
      </nz-select>
    </div>
    <div nz-col nzSpan="4" class="search-input text-center">
      <button (click)="getwebList()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
    </div>
  </div>
  <div>
    <nz-table #nzTable [nzData]="dataSet" [nzLoading]="isLoading"  [nzFrontPagination]="true">
      <thead>
      <tr>
        <th width="50%">阈值名称</th>
        <th>严重性</th>
        <th>状态</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of nzTable.data">
        <td class="main-color cursor" (click)="set(data)">{{data.description}}</td>
        <td>{{data.stateName}}</td>
        <td>
          <span class="color-green" *ngIf="data.status == 0">已启用</span>
          <span class="color-red" *ngIf="data.status == 1">已禁用</span>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</nz-modal>