angular - 我的过滤器不能在有角度的垫子上工作

Question

我的过滤器不能以角度工作，我的ts文件代码是：

private _jsonURL = 'assets/mytestusers.json';

ngOnInit() {
    this.http.get(this._jsonURL).subscribe((data) => this.displaydata(data));
    //  this.formdata1 = new FormGroup({srchval: new FormControl()});
    this.formSubscribe();
    this.getFormsValue();
}
displaydata(data: Object) {
    this.httpdata = data;
}
displayedColumns: string[] = ['position', 'name', 'username', 'email', 'address', 'action'];

// none value
filterValues = {
    name: ''
};

// form group
filterForm = new FormGroup({
    name: new FormControl()
});

get name() {
    return this.filterForm.get('name');
}
formSubscribe() {
    if (this.name != null) {
        this.name.valueChanges.subscribe(nameValue => {
            this.filterValues['name'] = nameValue;
            this.httpdata.filter = JSON.stringify(this.filterValues);
        });
    }
}
// create filter
getFormsValue() {
    this.httpdata.filterPredicate = (data: any, filter: string): boolean => {
        let searchString = JSON.parse(filter);

        const resultValue =
            data.name.toString().trim().toLowerCase()
            .indexOf(searchString.name.toLowerCase()) !== -1;

        return resultValue;
    };
    this.httpdata.filter = JSON.stringify(this.filterValues);
}

和 html 文件是

 <form [formGroup]="filterForm">
  <div>
    <div class="form-group">
    </div>
    <div>
      <label for="">Name</label>
      <mat-form-field>
        <input matInput formControlName="name" placeholder="Enter name">
      </mat-form-field>
    </div>
   </div>
</form>

我的json文件是

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[e-mail]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "[e-mail]",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  }
]

标签： angular