我有一个表,其中两列是用字符串表示的日期。我想基于两个输入(由两个ngb-datepickers填充,默认值为null)来过滤表。使用自定义管道,我目前遇到控制台错误Cannot read property '0' of undefined
,并且我的表未呈现到页面,所有按钮均不起作用,并且表单验证不起作用。我将自定义管道导入到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();
}
}
search-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;
});
}
}
我认为我的问题是我的转换功能中的语法/功能不正确。我已经看到了类似的问题,像这样的,但我似乎无法格式化为我需要和我太熟悉Angular2,尤其是管道。
arg不是数组,仅是之后的第一件事:
export class SearchPipe implements PipeTransform {
transform(value, firstDate , secondDate , arg3 , arg4 ){
return value.filter(row => {
return row.tStartDate >= firstDate && row.tEndDate <= secondDate;
});
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句