Question

我正在从服务中的api获取数据。现在，我必须按名称输入搜索过滤器。

这是我的代码服务：

export class ListService {
      listUrl = 'https://swapi.co/api/planets';
      constructor(private http: HttpClient) {}

      getList(): Observable<Dummy> {
        return this.http.get<Dummy>(this.listUrl);
      }
    }

主要组件：

 export class MainComponent implements OnInit {
      public planetList: Planet[] = [];

      constructor(private listService: ListService) {}

      ngOnInit() {
        this.listService.getList().subscribe(list => {
          this.planetList = list.results;
        });
      }
onSearchValueChanges(inputElement: HTMLInputElement) {}

主要组件HTML：

<input
      #searchInput
      type="text"
      (keyup)="onSearchValueChanges(searchInput)"
      placeholder="Search"
    />
    <app-list [planetsList]="planetList"></app-list>

列表组件：

    export class ListComponent implements OnChanges{
      @Input() planetsList: Planet[] = [];

    ngOnChanges() {
     console.log(this.planetsList)
    }
   }

是在主组件中过滤this.planetlist数组的最佳选择吗？还是应该使用RxJS过滤器？如果可以，该怎么办？

感谢提前答复！

Answer 1

您可以通过引用文档angular pipe创建自定义管道问题似乎像filtering in list

输入搜索过滤API Angular

1 个答案: