Question

我正在尝试将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);
    }

Answer 1

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

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

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

在有意义的情况下，在组件代码中正确设置logic_condition成员布尔变量的值的位置。这样，您不必担心自己设置属性（如果以后再更改组件中其他位置的值，也不必手动更新）。

Answer 2

您正在尝试使用id属性来访问模板引用。您应该改为使用模板引用变量：

<td #LegalClassName class="tableItem" *ngIf="c == 'Legal Class Name'">    <----- Notice that #LegalClassName is used instead of id="LegalClassName"                             
    {{f.LegalFundClassCommercialViewModel.Description }}
</td>

ALSO 您可以使用Angular的Renderer2来设置属性。为此，首先在构造函数中注入Renderer2，然后使用其setAttribute方法，如下所示：

@ViewChild('LegalClassName') myLegalClassName: ElementRef;

constructor(private renderer: Renderer2) {}

ngOnInit() {
  this.renderer.setAttribute(this.myLegalClassName.nativeElement, 'colspan', '2' );
}

以下是为什么/何时应该使用Renderer2而不是直接操作DOM的说明

Renderer2类是Angular提供的一种抽象形式服务的功能，无需操作即可操作应用程序的元素必须直接接触DOM。这是推荐的方法因为这样可以更轻松地开发可渲染的应用在没有DOM访问权限的环境中（例如在服务器上）网络工作者或本地移动设备上。

参考：https://alligator.io/angular/using-renderer2/

希望有帮助

Colspan没有使用@ViewChild应用于td

2 个答案: