create() {
this.tooltip = this.renderer.createElement('div');
this.renderer.appendChild(
this.tooltip,this.renderer.createText(this.tooltipTitle);
);
this.renderer.appendChild(document.body, this.tooltip);
例如:在我的应用程序中
this.tooltipTitle =“苹果,球,猫,狗,大象”
预期结果
Apple
Ball
Cat
Dog
答案 0 :(得分:1)
尝试一下:
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tooltipTitle = "Apple,Ball,Cat,Dog,Elephant";
tooltip: HTMLElement;
constructor(private renderer: Renderer2) { }
ngOnInit() {
this.create();
}
create() {
// creating the array
let titles = this.tooltipTitle.split(",")
// append each val of the resulting array to the tooltip
titles.forEach(title => {
const p = this.renderer.createElement('p');
this.renderer.appendChild(
p,
this.renderer.createText(title),
);
this.renderer.appendChild(document.body, p);
});
}
}
您还可以在文本后创建<br>
标签,并将其与当前代码更加对齐。像这样:
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tooltipTitle = "Apple,Ball,Cat,Dog,Elephant";
tooltip: HTMLElement;
constructor(private renderer: Renderer2) { }
ngOnInit() {
this.create();
}
create() {
this.tooltip = this.renderer.createElement('div');
this.tooltipTitle.split(',').forEach((text) => {
this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
this.renderer.appendChild(document.body, this.tooltip);
});
}
}
以下是更新的Working Sample StackBlitz供您参考。
答案 1 :(得分:0)
!!! 请注意,我的答案可能需要更正:我很久没使用Angular了,我忘记了大部分 !!!
但是我的答案会提示您如何做:
我认为整理标题可能会有所帮助
create() {
this.tooltip = this.renderer.createElement('div');
// creating the array
let titles = this.tooltipTitle.split(",")
// append each val of the resulting array to the tooltip
titles.forEach(title => {
this.renderer.appendChild(
this.tooltip,
this.renderer.createText(title);
);
});
this.renderer.appendChild(document.body, this.tooltip);
}