Angular 8 - 如何通过属性查询 DOM 元素？

debugcn 发表于 Dev

马塞尔 f

我有一个使用 renderer2 动态生成的 HTML 5 表：

const td = this.renderer.createElement('td');
this.renderer.setProperty(td, 'id', letter + i);
this.renderer.setAttribute(td, 'contenteditable', 'true');
this.renderer.setAttribute(td, 'r', i + '');
this.renderer.setAttribute(td, 'c', j + '');

该表具有以下结构

<table _ngcontent-iji-c1="" appcreatereport="">
<tr _ngcontent-iji-c1="">
<td _ngcontent-iji-c1="">1</td>
<td _ngcontent-iji-c1="" id="A1" contenteditable="true" r="1" c="1"></td>
<td _ngcontent-iji-c1="" id="B1" contenteditable="true" r="1" c="2"></td>
<td _ngcontent-iji-c1="" id="C1" contenteditable="true" r="1" c="3"></td>
<td _ngcontent-iji-c1="" id="D1" contenteditable="true" r="1" c="4"></td>
<td _ngcontent-iji-c1="" id="E1" contenteditable="true" r="1" c="5"></td>
</tr>
...

每个<td>都有一个“id”，一个行号“r”和一个列号“c”

我正在尝试只使用 angular（所以没有 jquery）并且我已经查看了许多现有的数据网格，但是它们从来没有完全涵盖我计划做的事情，并且扩展它们似乎比构建我需要的东西更复杂。

我有两个问题。

我的理解是，我不应该直接在 Angular 中操作 DOM，如果元素没有本地引用，我如何访问它们？（或者当我<td在 renderer2 中生成> 元素时如何添加本地引用。文本<TD>需要更新，例如当我从 excel 进行复制/粘贴时。
如何通过属性查询元素，所以我想要 r=1 和 c=4 的元素（而不是通过 id“D1”查询）。我只发现 @ViewChild 只适用于引用。

我目前正在通过以下方式设置 TD 元素的文本：

(document.getElementById(
          'C1'
        ) as HTMLTableDataCellElement).innerHTML = '123;

我怎样才能以更“角度”的方式做到这一点？

亚历克斯·沃夫丘克

最好的方法是更改设计以使用带有元素数组和*ngFor. 要将其从页面中删除，您可以使用*ngIf="elements.length === 0";

let elements = [{r:1, c: 1, value:''}, {r:1, c: 2, value:''} ... ];
elements[1].value = '123';

<td *ngFor="let el of elements" [r] = "el.r" [c]="el.c">{{el.value}}<\td>

在这种情况下，您可以td直接使用元素数组访问每个值。

作为替代方案 -ng-template可用于将表格保存在 html 中，但在需要时才显示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。