angular - 当我动态添加 html 属性时，ngx-text-diff 没有更新

Question

我正在使用一个名为 ngx-text-diff 的 npm 包来构建文件内容比较器，我成功导入了它的组件并且运行良好，html 选择器左右接收 2 个参数，代表要比较的 2 个字符串。问题是我试图通过让用户从列表中选择 2 个文件然后将它们的内容添加到右侧和左侧来动态更改这些属性，但是文本差异组件没有更新并且没有任何反应。

        <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 output with attributes added

View 未更新:

View

Answer 1

编辑:

来自 ngx-diff issue :

The component has an input called diffContent (observable type) that you can use to refresh the comparison. The src folder of this project you can see an example of how to use it. Each time that this.changedText is updated you should to use this observer to update the view.

<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);
}

---

尝试将属性绑定(bind)到组件属性并更新它们而不是列表对象。

另外，您可以更新您的长度检查吗？ 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)
  }