这是我第一次用安热。 我在检查或检查时试图显示所有数据并更新检查箱的价值。 我的法典如下:

数据集:

export class DatasetComponent implements OnInit {
  displayedColumns: string[] = [ id ,  sentenceWords , isHateSpeech ,  isIronic ];
  form: FormGroup;
  pageSizeOptions: number[] = [10, 25, 100, 500, 1000];
  sentences: MatTableDataSource<any> = new MatTableDataSource();

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(
    private formBuilder: FormBuilder,
    private datasetService: DatasetService,
    private loader: AppLoaderService
  ) {}

  ngOnInit(): void {
    this.initForm();
    this.loadCheckedValues();
    this.getFacebookSentencesList(1, 10,  id ,  asc ,   );
  }

  initForm() {
    const formControls = this.sentences.data.map(() =>
    this.formBuilder.control(false));
    this.form = this.formBuilder.group({
      checkboxes: this.formBuilder.array(formControls)
    });
  }


  get checkboxArray() {
    return (this.form.get( checkboxes ) as FormArray).controls;
  }

  loadCheckedValues() {
    const checkedValues = this.sentences.data.map((item) => ({
      isIronic: item.isIronic,
      isHateSpeech: item.isHateSpeech
    }));
    this.form.patchValue({ checkboxes: checkedValues });
  }

  onIsIronicChange(sentence, event, index) {
    this.sentences.data[index].isIronic = event.checked;
    this.loader.open( Updating... );
    const body: IEditIronyAnnotation = {
      id: sentence.id,
      isIronic: event.checked
    };

    this.datasetService.updateIronyAnnotation(body).subscribe(
      () => {
        console.log( Updated successfully! );
        this.loader.close();
      },
      (error) => {
        console.error( Error updating the post , error);
        this.loader.close();
      }
    );
  }

  onIsHateSpeechChange(sentence, event, index) {
    this.sentences.data[index].isHateSpeech = event.checked;
    this.loader.open( Updating... );
    const body: IEditHateSpeech = {
      id: sentence.id,
      isHateSpeech: event.checked
    };

    this.datasetService.updateHateOfSpeech(body).subscribe(
      () => {
        console.log( Updated successfully! );
        this.loader.close();
      },
      (error) => {
        console.error( Error updating the post , error);
        this.loader.close();
      }
    );
  }

  getFacebookSentencesList(page: number, pageSize: number, sortBy: string, sortDir: string, searchVal: string, body?: IFilterBody[]): void {
    this.loader.open( Loading data... );
    this.datasetService.getFacebookSentences(page, pageSize, sortBy, sortDir, searchVal, false).subscribe((response) => {
      this.sentences.data = response.data;
      this.paginator.pageIndex = response.currentPage - 1;
      this.paginator.pageSize = response.currentPageSize;
      this.paginator.length = response.totalElements;
      this.loadCheckedValues();
      this.loader.close();
    });
  }

  onPageChange(event: PageEvent): void {
    const page = event.pageIndex + 1;
    const pageSize = event.pageSize;

    this.getFacebookSentencesList(page, pageSize,  id ,  asc ,   );
  }
}

和tml模板:

<form [formGroup]="form">
    <div class="m-3">
      <table mat-table [dataSource]="sentences" matSort class="mat-elevation-z8">
        <!-- ID Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
          <td mat-cell *matCellDef="let sentence">{{ sentence.id }}</td>
        </ng-container>
    
        <!-- sentenceWords Column -->
        <ng-container matColumnDef="sentenceWords">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Sentence</th>
          <td mat-cell *matCellDef="let sentence">{{ sentence.sentenceWords }}</td>
        </ng-container>
  
         <!-- isHateSpeech Column -->
         <ng-container matColumnDef="isHateSpeech">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Is hate speech</th>
          <td mat-cell *matCellDef="let sentence; let i = index">
            <mat-checkbox [formControl]="checkboxArray[i].get( isHateSpeech )" [checked]="sentence.isHateSpeech" (change)="onIsHateSpeechChange(sentence, $event, i)"></mat-checkbox>
          </td>
        </ng-container>
  
        <!-- isIronic Column -->
        <ng-container matColumnDef="isIronic">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Is ironic</th>
          <td mat-cell *matCellDef="let sentence; let i = index">
            <mat-checkbox [formControl]="checkboxArray[i].get( isIronic )" [checked]="sentence.isIronic" (change)="onIsIronicChange(sentence, $event, i)"></mat-checkbox>
          </td>
        </ng-container>  
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator
      [pageSizeOptions]="pageSizeOptions"
      (page)="onPageChange($event)"
      showFirstLastButtons
    ></mat-paginator>
  </div>
  </form>

Usually , I got the error below. Furthermore the checked values are not shown. ERROR TypeError: Cannot read properties of undefined (reading get ) at FacebookDatasetComponent_td_11_Template (facebook-dataset.component.html:20:27) at ReactiveLViewConsumer.runInContext (core.mjs:10407:13) at executeTemplate (core.mjs:10947:22) at refreshView (core.mjs:12468:13) at detectChangesInView (core.mjs:12632:9) at detectChangesInEmbeddedViews (core.mjs:12576:13) at refreshView (core.mjs:12492:9) at detectChangesInView (core.mjs:12632:9) at detectChangesInComponent (core.mjs:12608:5) at detectChangesInChildComponents (core.mjs:12646:9)

下面是国际律师联合会的预告,APIC退回了所有答复小组,但国际律师联合会没有正确地把答复排在:。