javascript 相关问题

在我的父组件中，我将子组件称为：在我的父组件中，我将子组件称为： <c-multiselect-picklist multi-picklist-values={picklistValues} onselect={handleChange} preselected-string={selectedPicklistValue} data-id="first"></c-multiselect-picklist> JS： picklistValues = {}; picklistOptions = [ { label: 'First', value: 'First'}, { label: 'Second', value: 'Second'}, { label: 'Third', value: 'Third'}, { label: 'Fourth', value: 'Fourth'} ]; connectedCallback() { this.picklistValues.label = ''; this.picklistValues.optionsToSelect = this.picklistOptions; this.selectedPicklistValue = 'Some String'; } 在 UI 中，我有一个重置按钮，单击该按钮后，我想将多选子 LWC 重置为初始状态，而不进行任何选择。如何在 LWC 中实现这一目标。我尝试将 picklistValues 设置为 null，但闪电组合框仍然显示选定的选项。正如已经评论过的，如果没有看到您的实际实现，很难判断什么对您的自定义组合框有效，但是我可以向您展示一个可行的解决方案：多选组合框我写了一篇关于如何创建 LWC 多选组合框的文章，可能会对您有所帮助：https://medium.com/@svirk/how-to-create-the-lwc-multi-select-combobox-that-salesforce -仍然缺失-c7bf3a2850dd 包括 JEST 单元测试和 JSDoc 注释的源代码可在此处获取：https://github.com/svirk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectCombobox 重置当前选择要使用按钮等从外部重置当前选择，您只需添加一个重置方法并使用 @api 注释使其可供外部使用。如果您使用我的组件，此方法将如下所示： @api reset() { this.selectedItems = this.placeholder; this.currentOptions = []; this.selectedOptions = []; this.isLoaded = false; } 然后，您可以通过查询选择器从相应的父组件调用重置方法： this.template.querySelector('c-multi-select-combobox').reset(); 我们可以调用整个组件而不是调用组件中的方法吗？

javascript salesforce parent-child multi-select lwc

回答 2 投票 0

使用 NgComponentOutlet 进行动态内容投影的 Angular 渲染组件

<mat-button-toggle-group appearance="legacy" [(ngModel)]="selectedClockType"> <mat-button-toggle *ngFor="let item of items" [value]="item" color="primary"> {{ item.label }} </mat-button-toggle> </mat-button-toggle-group> @for (item of items; track:item.id) { <ng-container *ngComponentOutlet="item .component"></ng-container> } <ng-template #actionItesm let-data="data">{{data}} </ng-template> 组件-a.html <ng-content></ng-content> 组件-b.html <ng-content></ng-content> 我正在尝试使用下面的代码来传递 ngTemplate <ng-container *ngComponentOutlet="item .component;content: actionItesm ></ng-container> 并在Items中使用的所有组件中使用您需要使用 createEmbeddedView 的 ViewContainerRef，其中我们输入模板作为第一个参数，然后是包含模板上下文的第二个参数。我创建了一个新属性 templateRef，其中包含创建的模板引用结构。最后我们将该输入传递给 content 的属性 *ngComponentOutlet NgComponentOutlet中提到的示例是理解步骤和过程的一个很好的例子。完整代码：家长TS： import { CommonModule } from '@angular/common'; import { Component, ViewChild, ViewContainerRef, TemplateRef, Injector, } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { AComponent } from 'src/app/a/a.component'; import { BComponent } from 'src/app/b/b.component'; /** * @title Basic button-toggles */ @Component({ selector: 'button-toggle-overview-example', templateUrl: 'button-toggle-overview-example.html', standalone: true, imports: [ MatButtonToggleModule, CommonModule, AComponent, BComponent, FormsModule, ], }) export class ButtonToggleOverviewExample { @ViewChild('actionItesm', { static: true }) actionItesm!: TemplateRef<any>; selectedClockType: any; items: Array<any> = [ { id: 1, label: 'a', component: AComponent }, { id: 2, label: 'b', component: BComponent }, ]; myContent?: any[][]; myInjector: Injector; constructor(injector: Injector, private vcr: ViewContainerRef) { this.myInjector = injector; } ngOnInit() { // Create the projectable content from the templates if (this.items?.length) { this.items.forEach((item: any) => { item.templateRef = [ this.vcr.createEmbeddedView(this.actionItesm, { item: item }) .rootNodes, ]; }); } } } 父级 HTML： <mat-button-toggle-group appearance="legacy" [(ngModel)]="selectedClockType"> <mat-button-toggle *ngFor="let item of items" [value]="item" color="primary"> {{ item.label }} </mat-button-toggle> </mat-button-toggle-group> @for (item of items; track item.id;) { {{item.label}} <ng-container *ngComponentOutlet="item.component; content: item.templateRef;" ></ng-container> } <ng-template #actionItesm let-item="item">{{item.label}} asdf</ng-template> 儿童TS： import { Component } from '@angular/core'; @Component({ selector: 'app-b', standalone: true, imports: [], templateUrl: './b.component.html', styleUrl: './b.component.scss' }) export class BComponent { } 子 HTML： <hr /> B COMPONENT <ng-content></ng-content> <hr /> Stackblitz 演示

javascript angular angular17

回答 1 投票 0

如何在React js中点击按钮再次获取数据？

我创建了一个 HOC 或容器组件，从中获取数据并将其发送到子组件。我还使用react-router-dom库进行路由。我正在使用这样的 HOC 组件 <

javascript reactjs

回答 1 投票 0

为什么我的多页面 React 应用程序不显示我的页面？

这是我的第一个 React 项目，我想为我的后端 API 制作一个多页面应用程序，但我的页面都没有出现在屏幕上应用程序.jsx 从“反应”导入反应；导入 { HashRouter 作为路由器，路由，

javascript html reactjs vite

回答 1 投票 0

如果我在 React.js 中使用 cellRender，antd 日历会重复日期

我尝试重用 antd 日历组件几个月，并在每个日历上突出显示一些特定的日子（浅绿色）。为了执行此功能，我使用 cellRender 来自定义校准...