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 -sharpfilterTable [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 { }