如何解决使用模板组件的搜索过滤器问题
所以我在 sharepoint 网站上有一个过滤器组件,您可以在其中通过输入一些文本(可以来自标题或描述)来搜索新的,但最近我遇到了一些棘手的问题。对于两个用户,通过文本输入进行搜索会引发错误(见下图),但它适用于所有其他用户。这里有人遇到过类似的情况吗?
代码如下:
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();
}
}
render() {
this.categoriasFilter = uniqueCategorias(this.categorias);
return (
<Host>
<section class="news-filter">
<div class="news-filter-inner">
<div class="news-filter-content">
<div class="news-filter-content-data">
<snt-dropdown
id="ddlCategoria"
class="dropdown1"
placeholder="Categoria"
onValueChange={this.changeDllCategoria.bind(this)}
isClearable={true}
>
<snt-option value="">Todas as Categorias</snt-option>
{this.categoriasFilter.map((item: any) => {
return (
<snt-option
value={item.Label}
selected={item.Label === this.itenSelect}
>
{item.Label}
</snt-option>
);
})}
</snt-dropdown>
<spfx-datepicker
id="dtInicio"
datepicker-id="single-date-picker"
place-holder="Data Inicio"
></spfx-datepicker>
<spfx-datepicker
id="dtfim"
datepicker-id="single-date-picker"
place-holder="Data Fim"
></spfx-datepicker>
<snt-input-text
id="txtPesquisar"
tipo="text"
placeholder="Pesquise uma Notícia"
></snt-input-text>
</div>
<div class="news-filter-button">
<snt-button
text="APLICAR"
type="apply"
onBtnClick={this.searchHandler.bind(this)}
></snt-button>
<snt-button
text="LIMPAR"
type="clean"
onBtnClick={this.clear.bind(this)}
></snt-button>
</div>
</div>
</div>
</section>
</Host>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。