Angular2 过滤器 table 基于使用自定义管道的两个输入

Question

我有一个 table，其中两列是用字符串表示的日期。我想根据两个输入（由两个 ngb-datepickers 填充，默认值为 null）过滤 table。使用自定义管道，我目前收到控制台错误 Cannot read property '0' of undefined 以及我的 table 未呈现到页面，按钮的 none 有效，并且表单验证无效。我将我的自定义管道导入到 app.module.ts 中的声明中。包含最少的代码以显示整个范围，如果有任何混淆或包含更多内容，请告诉我。

mainpage.component.html:

<div>
  <label>Start Date:</label>
  <input type="text" [(ngModel)]="startDateValue">
</div>
  <label>End Date:</label>
  <input type="text" [(ngModel)]="endDateValue">
</div>
//'let idx=index' and 'let even=even' are used to change color of the rows but I took out that code. The 'onClick' function just takes the row and uses an EventEmitter to output it.
<tr *ngFor="let dPoint of theData | searchDates:startDateValue:endDateValue; let idx=index; let even=even;" (click)="onClick(dPoint, idx)">
  <td>{{dPoint.tDataPoint}}</td>
  <td>{{dPoint.tICCP}}</td>
  <td>{{dPoint.tStartDate}}</td>
  <td>{{dPoint.tEndDate}}</td>
</tr>

mainpage.component.ts:

@Component({
  selector: 'main-page',
  styleUrls: ['../app.component.css'],
  templateUrl: 'mainpage.component.html',
  providers: [DataTableService, DatePipe]
})

export class MainPageComponent implements OnInit {
  secondForm : FormGroup;
  theData:DataTable[] = [];

  constructor(fb: FormBuilder, private datePipe: DatePipe, private dataService: DataTableService, private cdRef:ChangeDetectorRef){
    this.secondForm = fb.group({
      'startDate' : [null, Validators.required],
      'endDate' : [null, Validators.required]
    }, {validator: this.endDateAfterOrEqualValidator})
  }

  getTable(): void {
    this.dataService.getTable().then(theData => this.theData = theData);
    this.cdRef.detectChanges();
  }
}

搜索-pipe.ts:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "searchDates"
})

//if I comment out the code inside the transform function, I get no console errors, all functionality previously mentioned that stopped working now does again, but my entire table still does not render
export class SearchPipe implements PipeTransform {
  transform(value, args?){
    let firstDate = new Date(args[0]);
    let secondDate = new Date(args[1]);
    //let [minDate, maxDate] = args;
    return value.filter(row => {
      return row.tStartDate >= firstDate && row.tEndDate <= secondDate;
    });
  }
}

我认为我的转换函数问题 syntax/functionality 不当。我见过类似的问题但我似乎无法根据需要格式化它，而且我对 Angular2 太不熟悉了，尤其是管道。

Answer 1

我希望这对您的示例有所帮助，因为它解决了我的问题。

尝试重用 async buikd-in 管道通知 Angular 只有在 promise 解析后才继续构建表单。

您的示例可能如下所示：

<tr *ngFor="let dPoint of theData | async | searchDates:startDateValue:endDateValue; let idx=index; let even=even;" (click)="onClick(dPoint, idx)">
  <td>{{dPoint.tDataPoint}}</td>
  <td>{{dPoint.tICCP}}</td>
  <td>{{dPoint.tStartDate}}</td>
  <td>{{dPoint.tEndDate}}</td>
</tr>

但首先你需要改变你的 theData 类型——你需要 promise 作为 return 类型

var theData: Promise<DataTable> = null;
this.theData = this.dataService.getTable();

因此，使用这种方法，在您的承诺未得到解决之前，您的转发器不会开始处理您的数据。在此阶段，您将拥有数据，并且您的 searchDates 管道不会导致空数据异常。

这里是关于这个管道的更多细节https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

Answer 2

arg 不是数组，只是后面的第一件事：

export class SearchPipe implements PipeTransform {
  transform(value, firstDate , secondDate , arg3 , arg4 ){

    return value.filter(row => {
      return row.tStartDate >= firstDate && row.tEndDate <= secondDate;
    });
  }
}

Angular2 过滤器 table 基于使用自定义管道的两个输入

Angular2 filter table based on two inputs using custom pipe

html

typescript

angular2-pipe

angular