import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NzModalService } from 'ng-zorro-antd';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'list',
  templateUrl: './list.html',
  styleUrls: ['./list.less'],
})
export class ListComponent implements OnInit {
  public ngOnInit () { }

  @ViewChild('canvas') private canvas: ElementRef;
  @ViewChild('form') private form: NgForm;

  public Info: InfoModel = new InfoModel();
  public search () {
    for (const i in this.form.controls) {
      this.form.controls[i].markAsDirty();
    }
    if (this.form.valid) {
    }
  }

  public accountList = [
    {
      accountInfo: {
        logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526377215350&di=e0de464e570239930220e045edee7e29&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb8389b504fc2d5620ea214c8ed1190ef76c66c69.jpg',
        name: '安宮和牛黃丸',
        type: '普通',
      },
      limit: '永久',
      msgCount: 0,
      createTime: 10000,
      type: '公眾號已到期',
    },
    {
      accountInfo: {
        logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526377215350&di=e0de464e570239930220e045edee7e29&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb8389b504fc2d5620ea214c8ed1190ef76c66c69.jpg',
        name: '安宮和牛黃丸',
        type: '普通',
      },
      limit: '永久',
      msgCount: 0,
      createTime: 20000,
      type: '未接入公眾號',
    },
    {
      accountInfo: {
        logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526377215350&di=e0de464e570239930220e045edee7e29&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb8389b504fc2d5620ea214c8ed1190ef76c66c69.jpg',
        name: '安宮和牛黃丸',
        type: '普通',
      },
      limit: '永久',
      msgCount: 0,
      createTime: 15000,
      type: '未接入公眾號',
    },
  ];
  public displayData = [...this.accountList];
}
class InfoModel {
  public keyword: string;
}

<nz-table #filterTable [nzData]="displayData">

module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { OfficialAccounts } from './officialAccounts.component';
import { ListComponent } from './list/list';
import { RecycleBinComponent } from './recycleBin/recycleBin';
import { AddAccountComponent } from './addAccount/addAccount';

import { OfficialAccountsRouting } from './officialAccounts.routing';

@NgModule({
  imports: [
    FormsModule, ReactiveFormsModule,
    CommonModule,
    OfficialAccountsRouting,
    NgZorroAntdModule.forRoot(),

  ],
  declarations: [
    OfficialAccounts,
    ListComponent,
    RecycleBinComponent,
    AddAccountComponent,
  ],
  providers: [

  ],
})
export class OfficialAccountsModule { }