Angular - см. Изменение переменной в родительском компоненте

В основном у меня есть форма, которая является родительским компонентом. Эта форма состоит из дочернего компонента.

Чтобы отключить кнопку, я проверяю переменную (datasetList [i] .fileValid) с помощью функции isDatasetFilesValid (). В дочернем компоненте изменяется переменная.

Однако это изменение выполняется в обратном вызове, когда я анализирую файл с помощью papaparse, и поскольку это выполняется в обратном вызове, родитель не видит его. Я знаю это, потому что, если я изменяю переменную вне обратного вызова, кнопка становится доступной.

Эта переменная проверяется, чтобы убедиться, что файл выбран.

Поэтому я попытался добавить «detectChanges ()», но это не сработало.

Родительский компонент:

   export class ExperimentCreateComponent implements OnInit {

     datasetList: any = [{ fileValid: false }];

     isDatasetFilesValid() {
       let index = this.datasetList.findIndex(function(item, i) {
       return item.fileValid == false;
       });
      let test = index === -1 ? true : false;
      console.info("Dataset", index + " -> " + test);
      return test;
      }
    }

Родительский HTML:

<div class = "jumbotron">
  <div class = "container">
    <div class = "row">
      <div class = "col-sm-8 offset-sm-2">

        <form name = "form" (ngSubmit) = "f.form.valid" #f = "ngForm" novalidate>


              <app-creation-dataset [datasetList] = "datasetList"></app-creation-dataset>

                <button mat-button color = "primary" type = "submit" [disabled] = "!isDatasetFilesValid()" (click) = "createExperiment()">Submit</button>


        </form>
      </div>
    </div>
  </div>
</div>

Дочерний компонент:

export class CreationDatasetComponent implements OnInit {
  @Input() datasetList: any = [{ fileValid: false }];
  fileSelected: File;


  constructor(private papa: Papa, private cd: ChangeDetectorRef) {}

  ngOnInit() {}

  onChange(files: FileList, index: number, dom: any) {
    // Option to parse the file with papaparse
    let options = {
      header: true,
      error: (err, file) => {
        this.datasetList[index].fileValid = false;
        alert(
          "Unable to parse CSV file, please verify the file can be accessed and try again. Error reason was: " +
            err.code
        );
        return;
      },
      complete: (results, file) => {
        console.info("Parsed:", results, file);
        let filename = file.name;

        // Add the dataset to the datasetList
        this.datasetList[index].headers = results.meta.fields;
        this.datasetList[index].values = results.data;
        this.datasetList[index].filename = filename;
        this.datasetList[index].is_metadata = false;
        this.datasetList[index].fileValid = true;
        this.cd.detectChanges();
      }
    };
    this.fileSelected = files[0]; // Get the file
    // Call the function to parse the file, option is the callback
    this.papa.parse(this.fileSelected, options);
  }
}

Дочерний HTML:

<div *ngFor = "let dataset of datasetList; let index = index">
  <div id = "datasetFiles">
    <h6>Select the type of dataset and browse the files:</h6>
    <div class = "container">
      <div class = "row justify-content-between">
        <div class = "col-6 d-flex align-items-center">
          <input id = "file" #file (change) = "onChange(file.files, index, $event.currentTarget)" type = "file">
        </div>
      </div>
    </div>
  </div>
</div>
<div>