时间戳

首页 > 解决方案 > Colspan 未使用 @ViewChild 应用于 td

angular - Colspan 未使用 @ViewChild 应用于 td

问题描述

我正在尝试将 colspan 动态应用于 td 元素，但它不起作用。有人知道它不起作用的原因。当我检查元素时，我看不到正在应用的 colspan

html

 <td id = "LegalClassName" class="tableItem" *ngIf="c == 'Legal Class Name'">
                                    {{f.LegalFundClassCommercialViewModel.Description }}</td>

组件代码

@ViewChild('LegalClassName') myLegalClassName: ElementRef;

addSideLetter(id) {
        this.SideLetter[id] = !this.SideLetter[id];
        this.myLegalClassName.nativeElement.setAttribute('colspan', 2);
    }

标签： angular

解决方案

您需要使用模板引用语法#LegalClassName而不是id="LegalClassName". 我猜这个this.myLegalClassName变量undefined在你的代码中？

无论如何，这段代码在我看来是反模式：您宁愿使用属性绑定的简单性，而不是自己检索 DOM 对象（除非您的实际逻辑更复杂？）：

<td class="tableItem" *ngIf="c == 'Legal Class Name'" [attr.colspan]="logic_condition ? 2 : 1">

logic_condition在有意义的情况下，您可以在组件代码中正确设置成员布尔变量的值。这样，您不必关心自己设置属性（并且如果您稍后在组件中的另一个位置更改值，您也不必手动更新它）。

推荐阅读