< ul< li>的问题使用Angular 6和Typescript [英] Problem with <ul><li> using Angular 6 and Typescript
问题描述
我有这种情况...
以下是代码:
<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...
最后，这是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的帮助，以确保最终结果看起来像这样
UPDATE: I'd like help with the Typescript and HTML to ensure that I get the final outcome looks like this
必须首先填写2个必填字段:
There are 2 required fields that you must complete to initial:
- 名字
- 姓氏
- 地址
底线:这让我想起了旧的Angular 1.6，我在我的个人网站www.peterborreggine.us的恢复"选项卡上进行了此操作:
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>
布莱恩，这有帮助吗?
布莱恩:更新2:
这是代码部分，与您编写的内容非常匹配
This is the section of the code that closely matches what you wrote
因此，这就是为什么我需要动态构建字符串的原因.message [0]包含字符串...
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>
更新3:
天哪！布莱恩(Bryan)，我发现了我的朋友的问题...该问题在没有"a"标签的情况下呈现....
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
作品:
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 ...
UPDATE 4: OK, I believe the problem lies within the line below and the HTML...
首先，包含"LI"的行
first, the line that contains the 'LI"
this.dependencyMessage += '<li><a title="click to go there...">' + components[i] + '</a></li>';
上面的那一行必须包含"A"标签...，否则将不会显示.其次，在HTML中...
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]呈现时包含文本:
message[0] contains the text when rendered:
<li><a title="click to go there...">Country of Issuance</a></li>
所以，布莱恩，我的问题是，我需要剔除(click)="buttonClick(message [0])"文本之外的所有内容，以便仅通过发行国家/地区.为什么我不能在打字稿文件中做到这一点?我的老板告诉我，我们必须容纳客户开发人员，而不要在.ts文件中硬编码".
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
谢谢，布莱恩！
更新5:和成功！
我发现我正在调用的数组不正确.
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>
一旦我纠正了上述FROM:
Once I corrected the above FROM:
<a href="javascript:;" (click)="buttonClick(message[1])" [innerHTML]="message[1]"></a>
一切正常.我要感谢Bryan的努力，让我思考！
Everything worked. I'm giving Credit to Bryan for stepping up and making me think!
谢谢.
以下是上面内容的呈现方式:
Here's how the above looks rendered:
推荐答案
创建一个非常简单的组件:
make a very simple component:
@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>
根据需要将此组件与该函数的输入一起呈现.
render this component with the input to that function as needed.
这篇关于< ul< li>的问题使用Angular 6和Typescript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
