Как обновить HTML после изменения массива Angular2+

Есть метода который выполняется последовательно , после выполнения this.TransportNDS.createDoc(ex) данного метода происходит изменение массива который выводиться в HTML, После принудительно вызываю detectChanges(), но DOM не изменяется.

async genPDF(ex: any) {
Promise.resolve()
 .then(() => this.expression = true)
 .then(() => this.TransportNDS.createDoc(ex))
 .then(() => this.expression = false)
 .then(() => this.alf = this.getDataPartyFire.extr)
 .then(() => this.changeDetection.detectChanges())}

HTML:

 <ol class="pills">
    <li *ngFor="let ex of alf, let i = index" class="purposePayment">
        <div>
            <p>Плательщик: {{ex.payer}}</p>
            <p>Получатель: {{ex.recipient}}</p>

        </div>
        <p>Дата: {{ex.date}}</p>
        <p>Сумма: {{ex.sum | currency: '₽ '}}</p>

        <a (click)="genPDF(ex)">Создатьдокумент</a>
    </li>
</ol>