在 mat 复选框中显示选中的值，并在 Angular Material 中更改其中之一时更新复选框的值

Question

这是我第一次使用 Angular。当我选中或取消选中它时，我试图显示所有数据并更新复选框的值。下面是我的代码：

数据集.component.ts：

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>

通常，我会收到以下错误。此外，未显示检查的值。 错误类型错误：无法读取未定义的属性（读取“get”） 在 FacebookDatasetComponent_td_11_Template (facebook-dataset.component.html:20:27) 在 ReactiveLViewConsumer.runInContext (core.mjs:10407:13) 在executeTemplate (core.mjs:10947:22) 在刷新视图（core.mjs：12468：13） 在 detectorChangesInView (core.mjs:12632:9) 在 detectorChangesInEmbeddedViews (core.mjs:12576:13) 在刷新视图（core.mjs：12492：9） 在 detectorChangesInView (core.mjs:12632:9) 在 detectorChangesInComponent (core.mjs:12608:5) 在 detectorChangesInChildComponents (core.mjs:12646:9)

下面是 UI 的预览，API 返回所有响应 jSON，但行在 UI 中未正确呈现：

我正在使用反应式表单，但行未正确呈现，并且值未按 IsHateSpeech 和 IsIronic 列中检查的方式显示

Answer 1

您的 initForm() 和 loadCheckedValues() 函数会迭代 Sentences.data 数组，但是当它们在 onInit 中调用时，还没有数据。所以我建议将这些代码移到 getFacebookSentencesList 的订阅中

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.initForm();
      this.loadCheckedValues();
      this.loader.close();
    });
  }