角度错误-“赋值表达式的左侧可能不是可选属性 access.ts”？

Question

在我的 Angular 打字稿文件中，我有以下代码。我需要帮助来解决这个打字稿错误

ngAfterViewInit() {
 setTimeout(() => {
 this.tada = document.querySelectorAll('.highlighted').length;
document.querySelector<HTMLElement>('.highlighted')?.style.backgroundColor = 'pink';->>Error
        this.fckme();
      }, 50);
    }

我收到以下错误

The left-hand side of an assignment expression may not be an optional property access.ts(2779)

我创建了自定义管道，如果我在文本中循环并搜索单词，如果给定文本中存在单词，我会向它添加突出显示的类，以便我可以用粉红色突出显示该单词

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlight'
})
export class HiPipe implements PipeTransform {

  transform(v1: string, v2: string): unknown {
   //some code
    for (const match of matches) {
      value = value.replaceAll(match, `<span class = "highlighted data-${match}">${match}</span>`);
    }
    return v1;
  }
}

Answer 1

试试这个：

这可能有助于其他人延迟回复。

document.querySelector<HTMLElement>('zsiq_floatmain zsiq_theme1 siq_bL')[0] ['style'].display = 'none'

Answer 2

把里面的问号去掉就行了

document.querySelector<HTMLElement>('.highlighted')?.style.backgroundColor = 'pink';

对于错误。

应该是

if(document.querySelector<HTMLElement>('.highlighted')){
    document.querySelector<HTMLElement>('.highlighted').style.backgroundColor = 'pink';
}

因为那？将 document.querySelector('.highlighted') 设为可选，在右侧我们为其赋值。

但它会在第一个具有“突出显示”类的项目中设置粉红色。所以你需要循环遍历元素或者给它添加一个粉色类。并将该类项的背景颜色设置为粉红色

尝试使用以下代码更改突出显示类的所有元素。

const elements = document.querySelectorAll('.highlighted');
    if(elements.length){
      elements.forEach((item:HTMLElement) => {
        item.style.backgroundColor = 'pink';
      })
    }

查看https://stackblitz.com/edit/angular-services-example-ygmmaq?file=src/app/app.component.html

Answer 3

未在文档对象上正确设置转换

ngAfterViewInit() {
setTimeout(() => {
//this.tada = document.querySelectorAll('.highlighted').length;
//you don't need this unless you are trying to apply the pink colour to all class with the selector above. returns an array of all elements with class highlighted
let highlight: Array<HTMLElement> = <HTMLElement>document.querySelectorAll('.highlighted');
//or let highlight:HTMLCollection[] = Array.from(document.getElementsByClassName('highlighted') as HTMLCollection<HTMLElement>)
highlight.forEach((el:HTMLElement) => {
 if(!el) return;
el.style.backgroundColor = 'pink';
});
,0}
}

请参阅此链接了解更多信息 Typescript 3.7@beta Optional Chaining operator using problem