角度模板错误

Question

我正在使用ngx分页和反应形式。我正在尝试检查/取消选中div click上的复选框，我收到以下错误，因为未捕获错误：模板解析错误：TypeError：无法读取属性＆＃39; toUpperCase＆＃39;未定义的（＆＃34;

我无法识别并解决它。请帮我解决一下

＆＃13;

＆＃13;

// component

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Form } from '@angular/forms/src/directives/form_interface';
import { FormBuilder } from '@angular/forms';
import { FormGroup, FormArray } from '@angular/forms/src/model';

@Component({
  selector: 'app-grid-table',
  templateUrl: './grid-table.component.html',
  styleUrls: ['./grid-table.component.scss']
})
export class GridTableComponent implements OnInit, OnChanges {
@Input() tableData;
tableDataBackup: any;
p = 1;
private form: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnChanges() {
    this.tableDataBackup = this.tableData;
  }

  ngOnInit() {
    this.form = this.fb.group({
      Arr: this.fb.array(
        this.tableData.map((list) => {
          return this.fb.control(false); // Set all initial values to false
        })
      )
    });
  }

  // Shorten for the template
  get Arr (): FormArray {
    return this.form.get('Arr') as FormArray;
  }

  onClick(i) {
    const control = this.Arr.controls[i];
    control.setValue(!control.value); // Toggle checked
  }

  filterData(i) {
    console.log(i);
    if (i.length > 0) {
      this.tableData = this.tableData.filter(
        data => data.Requisition.indexOf(i) !== -1
      );
    } else {
      this.tableData = this.tableDataBackup;
    }
  }

  pageChanged(p) {
    console.log(p);
  }

}


// error


compiler.js:485 Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
<form [formGroup]="form">
    <div formArrayName="Arr">
<div class="block block-row" [ERROR ->]*ngFor="let data of tableData; let i = index | paginate: { itemsPerPage: 10, currentPage: p, totalIte"): ng:///AppModule/GridTableComponent.html@15:29
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 38 in [let data of tableData; let i = index | paginate: { itemsPerPage: 10, currentPage: p, totalItems: count }] in ng:///AppModule/GridTableComponent.html@15:29 ("sPerPage: 10, currentPage: p, totalItems: count }">
    <div class="block60"><span class="checkbox" [ERROR ->](click)="onClick(i)" [ngClass]="{'selected': Arr.controls[i].value}"><input type="checkbox" formContr"): ng:///AppModule/GridTableComponent.html@16:48
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 38 in [let data of tableData; let i = index | paginate: { itemsPerPage: 10, currentPage: p, totalItems: count }] in ng:///AppModule/GridTableComponent.html@15:29 ("Page: p, totalItems: count }">
    <div class="block60"><span class="checkbox" (click)="onClick(i)" [ERROR ->][ngClass]="{'selected': Arr.controls[i].value}"><input type="checkbox" formControlName="{{i}}" /></sp"): ng:///AppModule/GridTableComponent.html@16:69
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 38 in [let data of tableData; let i = index | paginate: { itemsPerPage: 10, currentPage: p, totalItems: count }] in ng:///AppModule/GridTableComponent.html@15:29 ("eckbox" (click)="onClick(i)" [ngClass]="{'selected': Arr.controls[i].value}"><input type="checkbox" [ERROR ->]formControlName="{{i}}" /></span></div>

＆＃13;

<form [formGroup]="form">
    <div formArrayName="Arr">
<div class="block block-row" *ngFor="let data of tableData; let i = index | paginate: { itemsPerPage: 10, currentPage: p }">
    <div class="block60"><span class="checkbox" (click)="onClick(i)" [ngClass]="{'selected': Arr.controls[i].value}"><input type="checkbox" formControlName="{{i}}" /></span></div>
    <div class="block280 blue-row">{{data.Requisition}}</div>
    <div class="block145">{{data.RequisitionID}}</div>
    <div class="block145">{{data.Recruiter}}</div>
    <div class="block145">{{data.HiringManager}}</div>
    <div class="block145">{{data.Privacy}}</div>
  </div>
  </div>
</form>

  <pagination-controls (pageChange)="p = $event"></pagination-controls>

＆＃13;

＆＃13;

＆＃13;