angular2 - 剑道过滤器不起作用

Question

我在 Angular 2 过滤中遇到问题。我在onSelectStatus 时得到了空数组。谁能告诉我我错过了什么？这是我的代码：

app.component.html

<select [(ngModel)]="status" (change)="onSelectStatus(status)" class="form-control" id="status" name="status">
  <option *ngFor="let status of statuses" [ngValue]="status.value">{{status.value}}</option>
</select>

app.component.ts

status: number;
statuses = [];
selected;
selectedData;

ngOnInit() {

  console.log(this.userId);
  this.http.post(this.host + '/api/v1.0/merchant/mini-statement', {
      'datefrom': '2017-05-27',
      'dateto': '',
      'userId': this.userId
    })
    .map(res => res.json())
    .subscribe(data => {
      this.items = data;
      console.log(this.items);
      this.loadItems();
    }, error => {
      console.log(error);
    });

  this.statuses = [{
      id: 1,
      value: 'Successful',
    },
    {
      id: 2,
      value: 'Voided',
    }
  ];

}

constructor(private http: Http) {
  this.selectedData = this.items;
}

protected pageChange(event: PageChangeEvent): void {
  this.skip = event.skip;
  this.loadItems();
}

onSelectStatus(val) {
  console.log(val);
  this.selectedData = this.items.filter(x => x.status == val);
  console.log(this.selectedData);

}

data.json

Answer 1

您已将 status 声明为一个数字，但它的类型为 object，具有 id 和 value。

将其更改为您的状态类型

status: Status;

并将模型更改为，

<select [(ngModel)]="status.value" (change)="onSelectStatus(status)" class="form-control" id="status" name="status">

相应的 ts 将是，

onSelectStatus(stat) {
  console.log(stat);
  this.selectedData = this.items.filter(x => x.status == stat.value);
  console.log(this.selectedData);

}

Answer 2

这是我对这个问题的修复：

export class RecentSalesComponent implements OnInit {

  private gridView: GridDataResult;
  private data: Object[];
  private pageSize: number = 10;
  private skip: number = 0;

  private items: any[];

  status;
  statuses = [];

  outlet = '';
  selected;
  selectedData;



  ngOnInit() {

    console.log(this.userId);
    this.http.post(this.host, {
        'datefrom': '2017-05-27',
        'dateto': '',
        'userId': this.userId
      })
      .map(res => res.json())
      .subscribe(data => {
        this.items = data;
        this.loadItems();
      }, error => {
        console.log(error);
      });

    this.statuses = [{
        id: 1,
        value: 'Successful',
      },
      {
        id: 2,
        value: 'Voided',
      }
    ];

  }

  constructor(private http: Http) {
    this.selectedData = this.items;
    console.log(this.selectedData);
  }

  protected pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadItems();
  }

  private loadItems(): void {
    this.gridView = {
      data: this.items.slice(this.skip, this.skip + this.pageSize),
      total: this.items.length
    };
  }

  onSelectOutlet(val) {
    console.log(val);
    this.selectedData = this.items.filter(x => x.customerName == val);
  }


  onSelectStatus(val) {
    this.selectedData = this.items.filter(x => x.status == val);
    this.gridView = {
      data: this.selectedData.slice(this.skip, this.skip + this.pageSize),
      total: this.selectedData.length
    };
  }

}