角度-查看父組件中的變量更改

Question

基本上，我有一個表單是父組件。 此表單由子組件組成。

為了禁用按鈕，我使用isDatasetFilesValid（）函數檢查變量（datasetList [i] .fileValid ） 。 該變量在子組件中更改。

但是，當我使用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.log("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.log("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>

Answer 1

由於更改是在回調外部而不是內部進行的，因此父級會觀察到您的更改，因此上下文可能有問題。

嘗試這個：

  onChange(files: FileList, index: number, dom: any) {

    var that = this; // outer context

    // 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.log("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;
        that.datasetList[index].fileValid = true; // changed this to that
        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);
  }