Question

我正在尝试重用表组件，并显示从可观察对象获得的唯一数据。但是到目前为止，我到目前为止尝试的所有方法都无法正常工作。

父组件（返回标签）更改标签页事件有效。

import { Component, OnInit, Input } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material';

@Component({
  selector: 'returns-tab',
  templateUrl: './returns-tab.component.html',
  styleUrls: ['./returns-tab.component.css']
})
export class ReturnsTabComponent implements OnInit {
  constructor() {}
  status: string;
  ngOnInit() {
    switch (status) {
      case '0': {
        status = 'pending';
        break;
      }
      case '1': {
        status = 'approved';
        break;
      }
      case '3': {
        status = 'pending';
        break;
      }
    }
  }

  changeStatus(event: MatTabChangeEvent) {
    this.status = event.index.toString();
    console.log(this.status);
  }
}

新退货。我想每次更改选项卡时都更改“状态”的值，因此每当更改选项卡时，我都会获得不同的状态。

import { Component, OnInit, Input } from '@angular/core';
import { ReturnsService } from '../../returns.service';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';

import { MatToolbar } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { ListReturns } from '../../listReturn';

@Component({
  selector: 'new-returns',
  templateUrl: './newreturns.component.html',
  styleUrls: ['./newreturns.component.css']
})
export class NewreturnsComponent implements OnInit {
  public list = [];
  displayedColumns = ['orderId', 'date', 'prime', 'status', 'actions'];

  @Input('status')
  status: string;
  constructor(private returns: ReturnsService, private route: ActivatedRoute) {}

  ngOnInit() {
    // this.route.paramMap.subscribe((params: ParamMap) => {
    //   let status = params.get('status');
    // });
    this.getList();
  }

  getList() {

    this.returns.listReturns(status).subscribe(data => {
      this.list = data;
    });
  }
}

退货服务：这是根据上一个组件的状态返回数据的观察对象。

listReturns(status): Observable<ListReturns[]> {
    console.log('status:' + status);
    switch (status) {
      case 'pending': {
        status = 'PENDING_APPROVAL';
        break;
      }
      case 'approved': {
        status = 'APPROVED';
        break;
      }
    }
    return this.http
      .get<ListReturns[]>(
        `${this.url}/API/v1/Return/ListReturns?status=${status}`,
        {
          headers: headers
        }
      )
      .pipe(catchError(this.errorHandler));
  }

谢谢

Angular 6-当我更改标签时，来自Observable的数据不会更改

0 个答案: