Понимание крючков жизненного цикла angular и шаблона с вложенными циклами for

Question

Работал над выяснением проблемы, с которой я столкнулся, работая над некоторым существующим кодом.

Это компонент с селектором в HTML, который выглядит следующим образом:

<div my-component [option1]='hello' [option2]='world'></div>

и шаблон с этой структурой (перефразированный):

<div>
    <span>{{content1}}</span>
    <ng-container *ngFor="...">
        <span>{{content2}}</span>
    </ng-container>
</div>

Переменные 1 и 2 устанавливаются как @Inputs

Они не являются обязательными. Итак, что мы хотим сделать, это проверить, получили ли они значение в селекторе. Если это так, мы устанавливаем переменную в шаблоне на это значение. По сути, передача значения переменной из селектора в наш шаблон, чтобы сделать вещи.

Итак, логика для первого выглядит так:

ngAfterContentInit() {
    if (this.variable1) {
        this.content1 = this.variable1;
    }
}

это работает просто отлично. Шаблон отображает content1 как значение variable1, которое было передано через @input.

Тем не менее, я не могу поставить ту же логику для variable2 в ngAfterContentInit(), Это приводит к this.content2 быть нулевым

Я обнаружил, что могу поставить ту же логику, чтобы установить this.content2 внутри ngAfterViewChecked() крюк, и он будет работать там. Тем не менее, это только "занимает" во второй раз ngAfterViewChecked() называется (и каждый раз после этого).

Я думаю только о том, что первый хук жизненного цикла не ждет завершения цикла for. Я чувствую, что мне не хватает понимания передачи переменных в шаблон, когда существует цикл for.

На данный момент мое решение состоит в том, чтобы получить значение переменной 2 в ngAfterContentInit() и передать его в 3-ю переменную, которую я затем использую для установки content2 в ngAfterViewChecked(), У меня есть счетчик, поэтому я пытаюсь установить его только дважды (любые дальнейшие вызовы ngAfterViewChecked() не буду пытаться сбросить контент2)

Это кажется крайне уродливым!