ngx-text-diff не обновляется при динамическом добавлении html атрибутов

Question

Я использую пакет npm с именем ngx-text-diff для создания компаратора содержимого файла, я успешно импортировал его компонент, и он отлично работает, селектор html принимает 2 аргумента влево и вправо, которые представляют 2 Строка для сравнения. Проблема в том, что я пытаюсь динамически изменить эти атрибуты, позволяя пользователю выбрать 2 файла из списка, а затем добавить их содержимое справа и слева, но компонент text-diff не обновляется и ничего не происходит.

        <td-ngx-text-diff id="textdiff" [attr.left]="selected[0]?.content" [attr.right]="selected[1]?.content"></td-ngx-text-diff>

Вот моя функция для добавления файла:

  add(selectedFile) {
    if(selectedFile != null || selectedFile != undefined)
    {
        if(this.selected.length < 2){
          this.selected.push({'content': selectedFile.content, 
          'path': selectedFile.path});
          const toastRef: NbToastRef = this.toastrService.success(`${selectedFile.path} successfuly added`);
      }
      else{
          const toastRef: NbToastRef = this.toastrService.danger("You already selected 2 files");
      }
    }
    console.log(this.selected)
  }

элемент html обновляется, но ничего не отображается:

Html вывод с добавленными атрибутами

Просмотр не обновляется:

Просмотр

Answer 1

РЕДАКТИРОВАТЬ:

Из ngx-diff Issue :

Компонент имеет вход с именем diffContent (наблюдаемый тип), который можно использовать для refre sh сравнение. В папке sr c этого проекта вы можете увидеть пример того, как его использовать. Каждый раз, когда this.changedText обновляется, вы должны использовать этот наблюдатель для обновления представления.

<td-ngx-text-diff
          [left]="initialText"
          [right]="changedText"
          [diffContent]="contentObservable$"
        >
        </td-ngx-text-diff>

export interface DiffContent {
  leftContent: string;
  rightContent: string;
}
....
// Inside Component define observable
  contentObservable: Subject<DiffContent> = new Subject<DiffContent>();
  contentObservable$: Observable<DiffContent> = this.contentObservable.asObservable();

// Define a method that is called each time that `changedText` is updated:
 onChangedTextUpdated(textUpdated: string) {
  this.changedText = textUpdated;
  const newContent: DiffContent = {
    leftContent: this.initialText,
    rightContent: this.changedText
  };
  this.contentObservable.next(newContent);
}

---

Попробуйте связать атрибуты со свойствами компонента и обновить их вместо Ваш список объектов.

Дополнительно вы можете обновить проверку длины? if(this.selected.length <= 2){

Например:

Html:

 <td-ngx-text-diff id="textdiff" [attr.left]="leftContent" [attr.right]="rightContent"></td-ngx-text-diff>

Компонент:

...

leftContent = '';
rightContent = '';

...
  add(selectedFile) {
    if(selectedFile) {
        if(this.selected.length <= 2){
          this.selected.push({'content': selectedFile.content, 
          'path': selectedFile.path});
          const toastRef: NbToastRef = this.toastrService.success(`${selectedFile.path} successfuly added`);
          if(this.selected[0]) {
             this.leftContent = this.selected[0].content;
          }
          if(this.selected.[1]) {
             this.rightContent = this.selectedFile[1].content;
          }
      }
      else{
          const toastRef: NbToastRef = this.toastrService.danger("You already selected 2 files");
      }
    }
    console.log(this.selected)
  }