Реактивный @Input не получает данные должным образом в angular

Question

У меня есть один родительский компонент (container.component) и один дочерний компонент (plotting.component).

Из контейнера пользователь может загрузить файл. одна кнопка отправки отправит эти данные в компонент построения. К сожалению, я могу отправить данные из контейнеров на график только один раз. Если я пытаюсь загрузить несколько данных туда и обратно, это не работает. компонент построения не обновляется с правильными данными.

Вот мой container.component.html:

   <div class="input-group">
      <div class="custom-file">
        <input type="file" class="custom-file-input inputFile" id="inputFile" (change)="upload($event.target)" />
         <label class="custom-file-label" for="inputFile">{{fileName}}</label>
       </div>
    </div>

    <button class="btn btn-primary mt-2" (click)="passDAta()"> submit </button>



  <div class="card-body">
    <plotting [data]="data"></plotting>
  </div>

container.ts file:

data = new BehaviorSubject<any[]> ([]);
  scanData: any = [];

upload(input: HTMLInputElement) {
    const files = input.files;
    const fileToRead = files[0];

    if (fileToRead.type === "text/csv") {
      this.fileName = fileToRead.name;

      const fileReader = new FileReader();

      fileReader.onload = event => {
        const result = fileReader.result;
        if (typeof result !== "string") {
          throw new Error("Unexpected result from FileReader");
        }
        result.split("\n").map(data => {
          let [a, b] = data.split(",");
          this.scanData.push(this.p2c(parseFloat(b), parseFloat(a)));
        });
      };

      fileReader.readAsText(fileToRead, "UTF-8");
    } else {
      this.fileName = " unknow file type. csv only"
    }
  }

  passDAta() {
    this.data.next(this.scanData);
    console.log("parent: ", this.scanData)

  }

My plotting component.ts is:

private _data: any; 

@Input()
  set data(data: Observable<any>) {
    data.subscribe(data => {
      this._data = data;
    });
  }
  get data () {
    return this._data;
  }

Я также пытался с ngOnchanges. Но не могу обнаружить изменения. Я также создал стекблиз. Вы можете скачать CSV1 и CSV2. если вы загрузите файл туда-сюда, вы увидите, что данные не передаются в черчение из контейнера. Как я могу решить эту проблему?

Вот стек-блиц

Answer 1

Использование BehaviorSubject в этом случае не элегантно и может привести к слишком большому количеству подписок. Вы можете просто передать data установщику и не беспокоиться об обнаружении изменений. Попробуйте следующий

компонент контейнера

data = [];

passDAta() {
  this.data = this.scanData;
  console.log("parent: ", this.scanData)
}

компонент построения

private _data: any; 

@Input()
set data(data: any) {
  this._data = data;
}

get data () {
  return this._data;
}

Обновление

Старые данные из переменной scanData не удаляется до того, как в него будут помещены новые данные. Таким образом, @Input() работает как положено, за исключением того, что новые данные добавляются в конец старых данных. Вы можете просто удалить старые данные, используя this.scanData = []; в начале функции upload(). Попробуйте следующее

upload(input: HTMLInputElement) {
  this.scanData = [];
  .
  .
}

Я изменил ваш Stackblitz .

Я удалил проверку файла CSV в функции upload() в Stackblitz, чтобы получить это работает. Если нет, он продолжал выдавать мне неизвестный тип файла. только CSV 'ошибка. Я также назначил тип Array<{'x': number, 'y': number}> переменной-члену _data в компоненте построения.