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

问题

I have this situation...

Here's the code:

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

NOTE: The li's are the problem. When it renders, it shows the following...

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

Finally, here's the function in Typescript that is sending to the HTML page...

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');
}

UPDATE: I'd like help with the Typescript and HTML to ensure that I get the final outcome looks like this

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

• First Name
• Last Name
• Address

Bottom line: This reminds me of the old Angular 1.6 where I did this in my personal website: www.peterborreggine.us on resume tab:

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

Bryan, does this help?

Bryan: UPDATE 2:

This is the section of the code that closely matches what you wrote

So, that's why I need to build the string dynamically. message[0] contains the string...

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

UPDATE 3:

OMG! Bryan, I found the problem my friend... it renders without the "a" tags....

Here's the part that works and the part that doesn't

WORKS:

    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 line doesn't...

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

UPDATE 4: OK, I believe the problem lies within the line below and the HTML...

first, the line that contains the 'LI"

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

That line above must contain something the "A" tag... or it will not show. Secondly, in the HTML...

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

message[0] contains the text when rendered:

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

So, Bryan, my question is, I need to rip out everything except the text for the (click)="buttonClick(message[0])" so that only Country of Issuance is passed. Why can't I do it in the typescript file? My boss told me we have to accommodate the client developer and not "hard-code" in the .ts file.

My final question which I believe will fix this is:

How can I strip out the

Country of Issuance

so all I see is: Country of Issuance.

Thanks, Bryan!

UPDATE 5: and SUCCESS!

What I found was that the array's I was calling were incorrect.

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

Once I corrected the above FROM:

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

Everything worked. I'm giving Credit to Bryan for stepping up and making me think!

Thank you.

Here's how the above looks rendered:

回答1:

make a very simple component:

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

template:

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

render this component with the input to that function as needed.

来源：https://stackoverflow.com/questions/60776692/problem-with-ulli-using-angular-6-and-typescript