Question

我正在使用库lib-sqv来显示一些html。如果字段选项的开头有一个值，则视图将正确显示html。如果您想尝试一下，这是我的工作代码：

app.module.ts

imports: [
   ...
    SqvLibModule
]

bootstrap: [AppComponent]

appComponent.html

<div>
  <app-sqv></app-sqv>
</div>

seqComponent.ts

@Component({
  selector: 'app-sqv',
  templateUrl: './seq.component.html'
})

export class SeqComponent {

  options;
}

seqComponent.html

<lib-sqv [op]="options"></lib-sqv>

编辑：这是我使用的对象：

options = {

  mode: 'viewSequence',

  parameters: {
  fontSize: '14px',
  chunkSize: 5,
  colorChoice: 'custom'
},

view: [
  'AATQADLMEGMATQADLMEJGMATQADLMEGMATQADLMMATQADLMEGMATQADLMEJGMATQADLMEGZZZZZZ'

],

colors: [
  {
    type: 'region',
    start: 1,
    end: 2,
    color: {r: 204, g: 255, b: 0, a: 0.4}
  }
]

};

我试图在单击按钮后更改选项值，实际上它会更改它...但是视图不会更新。我该如何更新？

Answer 1

尝试一下：

<lib-sqv *ngIf="options" [op]="options"></lib-sqv>

或者这个

<div *ngIf="options">
    <lib-sqv [op]="options"></lib-sqv>
</div>

由于我无法调试，所以我只能猜测可能是加载时发生故障，这应该在填充选项时加载您的元素

Answer 2

我无法在HTML上呈现任何内容，但这应该可以工作。

首先，您需要获取该组件的引用，您可以使用以下命令进行操作：

@ViewChild(SqvLibComponent, {static: false}) sqvLibComp !: SqvLibComponent;

然后在您的public drawSqv(opt)上，您只需调用draw方法。

this.sqvLibComp.draw(opt);

这是stackblitz示例（https://stackblitz.com/edit/angular-dxbfs5），正如您在控制台上看到的那样，它正在触发重绘。

如何执行此操作的提示位于npm自述文件的底部：

如果需要，可以更改输入的选项，并显示更改。为此，请从组件中的“ sqv-lib”导入{SqvLibComponent}，声明sqv：SqvLibComponent并在需要时实例化this.sqv = new SqvLibComponent。最后执行方法this.sqv.draw（this.options），它将使用新选项绘制新的Sequence Viewer。

希望有帮助。

变量更改后更新视图

2 个答案: