<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>

注意： li 是问题所在。呈现时，它显示以下内容...

您必须填写 4 个必填字段以进行初始填写：

最后，这是发送到 HTML 页面的 Typescript 函数...

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 方面的帮助，以确保我得到的最终结果看起来像这样

There are 2 required fields that you must complete to initial:

First Name

Last Name

Address

底线：这让我想起了旧的 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：

这是与您编写的内容非常匹配的代码部分

所以，这就是我需要动态构建字符串的原因。 message[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：

天哪！布莱恩，我发现了我的朋友的问题......它在没有 "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 文件中的 "hard-code"。

我认为可以解决此问题的最后一个问题是：

我怎样才能去掉

发行国家

所以我只看到：发行国。

谢谢，布莱恩！

更新 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>

一旦我更正了上面的 FROM：

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

一切正常。感谢 Bryan 挺身而出让我思考！

谢谢。

上面的效果是这样的：

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>

根据需要使用该函数的输入渲染此组件。

<ul><li> 使用 Angular 6 和 Typescript 的问题

Problem with <ul><li> using Angular 6 and Typescript

typescript

angular6