0

我无法启动我的getData函数app.component.ts来返回包含 API 请求的所有参数的查询。我没有收到任何错误，我也不能console.log在函数内部，因为它不起作用。它会跳过我在里面写的所有内容getData。有任何想法吗？

app.component.ts

@Component({
  /**
   * Tag to show component in html
   */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MedicineService]
})

export class AppComponent implements OnInit, AfterViewInit {
  @ViewChildren(FiltersComponent) filters: QueryList<FiltersComponent>;
  title = 'Base Remédios';
  _medicines: Medicine[];
  resourceType: Filter[] = [
    {
      id: 'all',
      title: 'All',
      active: true,
    },
    {
      id: 'texto1',
      title: 'Texto1',
    },
    {
      id: 'texto2',
      title: 'Texto2',
    },
    {
      id: 'texto3',
      title: 'Texto3',
    },
  ];
  levels: Filter[] = [
    {
      id: 'grupo1',
      title: 'Grupo1',
      active: true,
    },
    {
      id: 'grupo2',
      title: 'Grupo2',
    },
    {
      id: 'grupo3',
      title: 'Grupo3',
    },
  ];

  private resources: Observable<any>;

  constructor(private _medicineService: MedicineService) {
  }

  /**
   * Function to get array itens of endpoints
   */
  getMedicines(): void {
    this._medicineService.getMedicines()
      .subscribe(
        resultArray => this._medicines = resultArray,
        error => console.log(error));
  }

  ngOnInit(): void {
    this.getMedicines();
  }

  ngAfterViewInit() {
    const filters = this.filters.map(f => f.changeFilter);
    console.log('oi');
    this.resources = combineLatest(...filters).pipe(
      map((filters: ActiveFilter[]) =>
        filters.map(filter => `${filter.group}=${filter.id}`).join('&')),
      switchMap(this.getData));
  }

  getData(query) {
    return timer(1).mapTo('https://api.com?' + query);
  }

}

过滤器组件.ts

   export interface ActiveFilter {
  id: number | string;
  group: string;
}

export interface Filter {
  id: string | string;
  title: string;
  active?: boolean;
}

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.css']
})
export class FiltersComponent implements OnInit, OnDestroy {
  @Input() group: string;
  @Input() filters: Filter[] = [];

  changeFilter;

  ngOnInit(): void {
    const initialFilter = this.filters.find(f => f.active);

    this.changeFilter = new BehaviorSubject<ActiveFilter>({
      group: this.group,
      id: initialFilter.id
    });
  }

  ngOnDestroy() {
    this.changeFilter.unsubscribe();
  }

  select(filter: Filter) {
    console.log('click funciona');
    this.filters.forEach(filter => filter.active = false);
    filter.active = true;
    this.changeFilter.next({
      group: this.group,
      id: filter.id
    });
  }

}

过滤器.component.html

<ul>
  <li *ngFor="let filter of filters" (click)="select(filter)" [ngClass]="{ active: filter.active }">
    {{filter.title}}
  </li>
</ul>

app.component.html

<section>
      <app-filters [filters]="resourceType" group="type"></app-filters>
      <app-filters [filters]="levels" group="level"></app-filters>
 </section>
4

1 回答 1

0

您传递给switchMap函数的参数存在问题rxjs。

修改后的代码 -

  ngAfterViewInit() {
    const filters = this.filters.map(f => f.changeFilter);
    console.log('oi');
    this.resources = combineLatest(...filters).pipe(
      map((filters: ActiveFilter[]) =>
        filters.map(filter => `${filter.group}=${filter.id}`).join('&')),
      switchMap(()=>this.getData())); // <------ change here
  }

参考这个 - https://www.learnrxjs.io/operators/transformation/switchmap.html

于 2018-11-26T20:20:41.177 回答