обновить вид после изменения переменных

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

Я не могу заставить его отображать что-либо в HTML, однако это должно работать.

Сначала вам нужно получить ссылку на этот компонент, который вы можете сделать с помощью:

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

Затем на вашем public drawSqv(opt) вы просто вызываете метод draw.

this.sqvLibComp.draw(opt);

Вот пример стекаблиц (https://stackblitz.com/edit/angular-dxbfs5), как вына консоли видно, что запускается перерисовка.

Подсказка о том, как это сделать, была в нижней части readme npm:

При необходимости можно изменить входные параметрыи изменения будут отображены. Для этого импортируйте {SqvLibComponent} из 'sqv-lib' в вашем компоненте, объявите sqv: SqvLibComponent и создайте экземпляр this.sqv = new SqvLibComponent, когда это необходимо. Наконец, выполните метод this.sqv.draw (this.options), который будет рисовать новый просмотрщик последовательностей с новыми параметрами.

Надеюсь, что поможет.

Answer 2

Попробуйте это:

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

Или это

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

Поскольку я не могу отлаживать, я могу только догадываться, что, возможно, что-то не работаетзагрузить, это должно загрузить ваш элемент, когда параметры заполнены