过滤 JSON 的数组

Question

嘿，我正在关注另一个指南，并且真的很难让它为我工作。 Angular 有点新，所以我确信这是一个简单的问题。谁能帮帮我？

前端在页面加载时显示所有 JSON 对象，但当我输入任何内容时，它们都会消失。

 _ninjaFilter:string
 get ninjaFilter():string{
   return this._ninjaFilter;
 }
 set ninjaFilter(value:string){
   this._ninjaFilter = value
   console.log(this.filteredNinjas, this.ninjaFilter)
   this.filteredNinjas = this.ninjaFilter ? this.performFilter(this.ninjaFilter) : this.ninjas
 }

 performFilter(filterBy: string): any{
  filterBy = filterBy.toLocaleLowerCase();
  console.log(filterBy)
  return this.ninjas.filter(ninja=>{
      ninja.name.toLocaleLowerCase().includes(filterBy)
      //tried a if statement here to console log match and it does log out match
    //also have tried .indexOf(filterby) !== -1

    })
 }
  filteredNinjas: any

    ninjas=[{
    'name':'yoshi',
    'belt':'red'
  },
  {
    'name':'luigi',
    'belt':'black'
  },
  {
    'name':'Ryu',
    'belt':'green'
  }]


  constructor(private route: ActivatedRoute) { 
    this.filteredNinjas = this.ninjas //create new array to filter on
    this.ninjaFilter='' //set initial filter string to null
  }

和视图：

<h2>Ninja Listing</h2>
<input type='text' id="filter"
[(ngModel)]='ninjaFilter' />
<ul id="ninja-listing">
    <li *ngFor="let ninja of filteredNinjas">
        <div class='single-ninja'>
            <span [ngStyle]="{background: ninja.belt}">{{ninja.belt}} belt</span>
            <h3>{{ninja.name}}</h3>
        </div>
    </li>
</ul>

这是控制台日志（第一页加载然后我输入）

(3) [{…}, {…}, {…}] "r"
directory.component.ts:23 r
directory.component.ts:17 [] "ry"
directory.component.ts:23 ry
directory.component.ts:17 [] "ryu"
directory.component.ts:23 ryu

Answer 1

您没有 return 过滤函数中的任何内容。你应该 return 那里有一个条件：

return this.ninjas.filter(ninja => {
      return ninja.name.toLocaleLowerCase().includes(filterBy);
});

过滤 JSON 的数组

Filtering an array of JSON

angularjs

angular