使用模板组件的搜索过滤器的问题

Issues with a search filter using stencil component


问题

大家好,

我在一个Sharepoint网站上有一个过滤器组件,你可以通过输入一些文本(可以是标题或描述)来搜索新的内容,但最近我遇到了一些棘手的问题。对于两个用户来说,通过文本输入进行搜索会出现错误(见下图),但对于其他用户来说,它是有效的。有没有人遇到过类似的情况?

91180-microsoftteams-image-4.png


我也想和大家分享一下代码,希望对大家有帮助。

 import {
   Component,
   Host,
   h,
   Prop,
   Event,
   EventEmitter,
   Element,
 } from "@stencil/core";
 import { uniqueCategorias } from "./../../utils/utils";
    
 export interface SearchData {
   dtInicio?: string;
   dtFim?: string;
   categoria?: string;
   texto?: string;
   isFilter?: boolean;
 }
    
 @Component({
   tag: "snt-noticias-cards-filtro",
   styleUrl: "noticias-cards-filtro.scss",
   shadow: true,
 })
 export class SntNoticiasCardsFiltro {
   @Element() private element: HTMLElement;
   get ddlCategoria(): any {
     return this.element.shadowRoot.querySelector("#ddlCategoria") as any; //vai buscar a categoria selecionada no filtro
   }
   //faz a lista de categorias para colocar na dropdown
   get allddlCategoria(): NodeListOf<HTMLElement> {
     return this.element.shadowRoot.querySelectorAll(
       "ul > snt-option"
     ) as NodeListOf<HTMLElement>;
   }
    
   get dtInicio(): any {
     return this.element.shadowRoot.querySelector("#dtInicio") as any;
   }
    
   get dtFim(): any {
     return this.element.shadowRoot.querySelector("#dtfim") as any;
   }
   get txtPesquisar(): HTMLInputElement {
     return this.element.shadowRoot.querySelector(
       "#txtPesquisar"
     ) as HTMLInputElement;
   }
    
   @Event({ eventName: "search", bubbles: false }) search: EventEmitter<
     SearchData
   >;
    
   @Prop() disable: boolean = true;
   @Prop() categorias: any[];
   @Prop() itenSelect: string;
    
   categoriasFilter: any[] = [];
    
   async componentDidLoad() {
     this.categoriasFilter = uniqueCategorias(this.categorias);
   }
   //vai buscar as informações ao filtro 
   async searchHandler(event?: CustomEvent) {
     this.search.emit({
       categoria: this.itenSelect,
       texto: this.txtPesquisar.value,
       dtInicio: await this.dtInicio.getDate(),
       dtFim: await this.dtFim.getDate(),
     });
    
     event && event.stopPropagation();
   }
   //Ao mudar de categoria
   changeDllCategoria({ detail }) {
     this.itenSelect = detail;
   }
   //limpa o filtro
   clear() {
     this.txtPesquisar.value = null;
     this.dtInicio.clearDate();
     this.dtFim.clearDate();
     this.itenSelect = "";
     this.ddlCategoria.setValue("");
     this.searchHandler();
   }
 }

答案1

你好 ,

我不熟悉钢网组件,但如果它对其他用户有效。所以我认为你的代码很好。

那么对于这两个用户,是否有什么特别之处?

你好

谢谢你花时间解决这个问题。

该代码对其他用户有效,无论是mac还是windows。都是使用google chrome,这是公司的默认浏览器。更加奇怪的是,针对你的问题,这两个用户在Sharepoint网站上的权限比其他大多数用户都要多。

我也认为这可能是浏览器设置的问题,但他们的设置和我的一样,在我的电脑上一切都正常。

你有其他想法吗?

谢谢你!