如何获取Angular中viewChild的innerHTML的值？

Question

我需要 Angular 中的 viewChild 的值来检查它是否为空字符串。

我的 ViewChild 看起来像这样：

@ViewChild('myItem', { static: true }) myItem: ElementRef;

我得到这样的值：

console.log('itemType', this.myItem.nativeElement.firstChild); // returns "TESTSTRING"

在控制台中，值如下所示：“TESTSTRING”是一个字符串，但如果我检查 typeof，它说它是一个对象：

console.log('itemType', typeof this.myItem.nativeElement.firstChild); // returns object

我想这样检查：

this.myItemIsEmpty = this.myItem.nativeElement.firstChild === ''; // returns always false

我做错了什么？

Answer 1

以下部分 this.myItem.nativeElement.firstChild returns 类型为 ChildNode 的元素 - 表示 DOM 元素。要获取其中的文本，您需要使用 textContent 属性.

@Component({/* ...*/})
export class MyComponent implements AfterViewInit {
   @ViewChild('myItem', { static: true }) myItem: ElementRef;

   // Only try to access @ViewChild/@ContentChild in/after AfterViewInit as DOM might not be rendered otherwise
   public ngAfterViewInit():void {
      this.myItemIsEmpty = this.myItem.nativeElement.firstChild.textContent === '';
   }
}

如何获取Angular中viewChild的innerHTML的值？

How to get the value of the innerHTML of a viewChild in Angular?

angular

typescript

angular-template

viewchild