如何设置 angular ng-template 选择器的样式
How to style angular ng-template selector
我正在努力设置 ng-template
标签的样式。
到目前为止,我在 .css 文件中尝试过的内容:
- 在我的 .css 文件中使用 #other_content 作为 ID
- 将 class 添加到
<ng-template>
- 为所有
<td>
个标签设置样式
它不起作用,搜索后我没有找到任何解决方案。
HTML:
<div class="cont">
<div class="scolldiv">
<table border="1">
<thead>
<tr>
<th>Char</th>
<th>Break After</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let charobj of Chars;let i = index" [attr.data-index]="i">
<td>{{charobj.char}}</td>
<td class="tdcell" *ngIf= "charobj.after; else other_content">YES</td>
<ng-template #other_content>NO</ng-template>
<td>
<MyBtn
[ID]="'btnaddchars_' + i"
[BackColor]= "globals.sysButtonBackColor"
[Color]= "globals.sysButtonForeColor"
[HoverBackColor] = "globals.sysHoverButtonBackColor"
[HoverColor] = "globals.sysHoverButtonForeColor"
[Text] ="'Delete'"
[SecondText]="'Close'"
[Width] ="'70px'"
[Height]="'17px'"
(buttonWasClicked) ="onSymbolsFormButtonClick($event)"
>
</MyBtn>
</td>
</tr>
</tbody>
</table>
</div>
</div>
图片:
因为标签 <ng-template>
在 DOM
呈现为如下内容时被转换为绑定
<!--bindings={
"ng-reflect-ng-if": "false",
"ng-reflect-ng-if-else": "[object Object]"
}-->
尝试为您的文本示例提供 class(CSS class)
:
<ng-template #other_content>
<label class='_YOUR CSS CLASS_'>No</label>
</ng-template>
我正在努力设置 ng-template
标签的样式。
到目前为止,我在 .css 文件中尝试过的内容:
- 在我的 .css 文件中使用 #other_content 作为 ID
- 将 class 添加到
<ng-template>
- 为所有
<td>
个标签设置样式
它不起作用,搜索后我没有找到任何解决方案。
HTML:
<div class="cont">
<div class="scolldiv">
<table border="1">
<thead>
<tr>
<th>Char</th>
<th>Break After</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let charobj of Chars;let i = index" [attr.data-index]="i">
<td>{{charobj.char}}</td>
<td class="tdcell" *ngIf= "charobj.after; else other_content">YES</td>
<ng-template #other_content>NO</ng-template>
<td>
<MyBtn
[ID]="'btnaddchars_' + i"
[BackColor]= "globals.sysButtonBackColor"
[Color]= "globals.sysButtonForeColor"
[HoverBackColor] = "globals.sysHoverButtonBackColor"
[HoverColor] = "globals.sysHoverButtonForeColor"
[Text] ="'Delete'"
[SecondText]="'Close'"
[Width] ="'70px'"
[Height]="'17px'"
(buttonWasClicked) ="onSymbolsFormButtonClick($event)"
>
</MyBtn>
</td>
</tr>
</tbody>
</table>
</div>
</div>
图片:
因为标签 <ng-template>
在 DOM
呈现为如下内容时被转换为绑定
<!--bindings={
"ng-reflect-ng-if": "false",
"ng-reflect-ng-if-else": "[object Object]"
}-->
尝试为您的文本示例提供 class(CSS class)
:
<ng-template #other_content>
<label class='_YOUR CSS CLASS_'>No</label>
</ng-template>