Проблема с <ul><li> с использованием Angular 6 и Typescript

Question

У меня такая ситуация ...

Вот код:

    <div id="botcont{{i}}">
      <img *ngIf="!paperRoll[1]" id="imgbot{{i}}" class="minibot" src="img/bot_l.svg" alt=""/>
      <div *ngIf="!paperRoll[1]" class="arrow_box">
        <div *ngFor="let message of paperRoll[0]">
          <span *ngIf="!message[1]" [innerHTML]="message[0]">
            <span *ngIf="message[1]">
              <a href="javascript:;" (click)="buttonClick(message[0])" [innerHTML]="message[0]"></a>
            </span>
          </span>
        </div>
      </div>
    </div>

ПРИМЕЧАНИЕ: Проблема в том, что это проблема. Когда он рендерит, он показывает следующее ...

Есть 4 обязательных поля, которые необходимо заполнить до начальных:

Наконец, вот функция в Typescript, которая отправляет на страницу HTML ...

public showInitialDependencies(components: string[]): void {
    this.dependencyMessage = 'There are ' + components.length + ' required fields that you must complete to initial:</p></p><ul class="avatar-list"><Mute>';
    for (let i = 0; i < components.length; i++) {
        this.dependencyMessage += `<li><a>` + components[i] + `</a></li>`;
    }
    this.dependencyMessage += `</ul>`;
    console.log(this.dependencyMessage);

    // Start StakeHolderWarning state
    this.enterState('InitialDependency');
}

ОБНОВЛЕНИЕ: Мне нужна помощь с помощью Typescript и HTML, чтобы убедиться, что я получаю окончательный результат, похожий на этот

Есть 2 обязательных поля, которые необходимо заполнить до начальных:

• Имя
• Фамилия
• Адрес

Итог: это напоминает мне старую Angular 1.6, где я делал это на моем личном сайте: www.peterborreggine.us на вкладке резюме:

   <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <div name="tech" ng-repeat="tech in ctrlRes.resume.highlights.technical">
          <ul>
            <li>{{tech}}</li>
          </ul>
        </div>
      </div>
    </div>

Брайан, это помогает?

Брайан: ОБНОВЛЕНИЕ 2:

Этот раздел кода близко соответствует тому, что вы писал

Итак, вот почему мне нужно построить строку динамически. сообщение [0] содержит строку ...

        <div *ngFor="let message of paperRoll[0]">
          <span *ngIf="!message[1]" [innerHTML]="message[0]">
            <span *ngIf="message[1]">
              <a href="javascript:;" (click)="buttonClick(message[0])" [innerHTML]="message[0]"></a>
            </span>
          </span>
        </div>

ОБНОВЛЕНИЕ 3:

OMG! Брайан, я нашел проблему, мой друг ... она рендерится без тегов "a" ....

Вот часть, которая работает, и часть, которая не

РАБОТАЕТ:

    this.dependencyMessage = 'There are ' + components.length + ' required fields that you must complete to initial:<br><ul class="avatar-list">';
    for (let i = 0; i < components.length; i++) {
        this.dependencyMessage += `<li>` + components[i] + `</li>`;
    }
    this.dependencyMessage += `</ul>`;

Эта строка не ...

        this.dependencyMessage += `<li><a>` + components[i] + `</a></li>`;

ОБНОВЛЕНИЕ 4: Хорошо, я считаю, что проблема заключается в строке ниже и HTML ...

во-первых, строка, которая содержит 'LI'

this.dependencyMessage += '<li><a title="click to go there...">' + components[i] + '</a></li>';

Эта строка выше должна содержать что-то тег "A" ... или не будет отображаться. Во-вторых, в сообщении HTML ...

<a href="javascript:;" (click)="buttonClick(message[0])" [innerHTML]="message[0]"></a>

[0] содержится текст при визуализации:

<li><a title="click to go there...">Country of Issuance</a></li>

Итак, Брайан, мой вопрос, мне нужно вырвать все кроме текста для (click) = "buttonClick (message [0])", так что передается только Страна выдачи. Почему я не могу сделать это в файле машинописного текста? Мой начальник сказал мне, что мы должны принять клиента-разработчика а не "жесткий код" в файле .ts.

Мой последний вопрос, который, я считаю, исправит это:

Как я могу исключить

Страна выдачи так все Я вижу это: Страна выдачи.

Спасибо, Брайан!

ОБНОВЛЕНИЕ 5: и УСПЕХ!

Я обнаружил, что массив, который я вызывал, был неправильным.

        <ng-container *ngIf="paperRoll.length">
          <div *ngFor="let message of paperRoll[0]">
            <span id="message[0]-{{i}}" *ngIf="!message[1]" [innerHTML]="message[0]"></span>
            <span id="message[1]-{{i}}" *ngIf="message[1]">
              <a href="javascript:;" (click)="buttonClick(message[0])" [innerHTML]="message[0]"></a>
            </span>
          </div>
        </ng-container>

        <a href="javascript:;" (click)="buttonClick(message[0])" [innerHTML]="message[0]"></a>

Как только я исправил выше сказанное ОТ:

        <a href="javascript:;" (click)="buttonClick(message[1])" [innerHTML]="message[1]"></a>

Все заработало. Я отдаю должное Брайану за то, что он сделал шаг вперед и заставил меня задуматься!

Спасибо.

Вот как выглядит вышеперечисленное:

Answer 1

делает очень простой компонент:

@Component({
  selector: 'initial-dependencies',
  templateUrl: './initial-dependencies.component.html'
})
export class InitialDependenciesComponent {
  @Input()
  components: string[] = [];
}

шаблон:

<p>There are {{components.length}} required fields that you must complete to initial:</p>
<ul class="avatar-list"><Mute>
  <li *ngFor="let component of components">
    <a>{{component}}</a>
  </li>
</ul>

визуализирует этот компонент с входными данными для этой функции по мере необходимости.