需要在 LWC 中更改选择列表值来更新表

问题描述

有一个将信息传递给子组件的帐户列表。需要更改选择列表的值（handleChange 中的值类型），帐户列表也会更改并将更新的信息传递给子组件。现在 list.js 中的 handleChange，除了更新 valueType 什么都不做。

listController.cls

public with sharing class listController {
    

@AuraEnabled (cacheable = true)

public static List<Account> getAcclist(String valueType){

String key = '%' + valueType + '%';

    if (valueType != null && valueType != ''){
        return [SELECT Id,Name,image__c,(SELECT Name FROM Users),Budget__c,NumberOfEmployees,Type,Description,Industry FROM Account WHERE Type LIKE :key ];
    } else {
        return [SELECT Id,Industry FROM Account];
    }

        }

}

list.html

<template>
    <lightning-card>
        
        <template if:true={TypePicklistValues.data}>
            <lightning-comboBox name="progress"
                                label="Type"
                                value={valueType}
                                placeholder="-Select-"
                                options={TypePicklistValues.data.values}
                                onchange={handleChange} >
            </lightning-comboBox>
      </template><br/>

        <template if:true={accounts.data}>
           
    <div class = "container">
        <div class="slds-Box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
        <lightning-layout multiple-rows> 
            
        <template for:each={accounts.data} for:item="account">
            
                <c-tile 
                key={account.id} 
                account={account} 
                ontileclick={handleTileClick}>
            </c-tile>
        
    
        </template>
   
    </lightning-layout>
</div>
    </div>   
</template>

</lightning-card>
    
</template>

list.js

import { LightningElement,wire,api,track } from 'lwc';
import getAcclist from '@salesforce/apex/listController.getAcclist';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getobjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';

import getValueType from '@salesforce/apex/listController.getValueType';

export default class List extends LightningElement {

    @wire(getAcclist) accounts;
    @wire(getValueType) apexValueType;
    
    
    @api valueType;
    @track apexValueType;

    @wire(getobjectInfo,{ objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    @wire(getPicklistValues,{ recordtypeId: '$objectInfo.data.defaultrecordtypeId',fieldApiName: Type_FIELD})
    TypePicklistValues;

    handleChange(event) {
        this.valueType = event.detail.value;
       getAcclist({valueType:this.valueType});
       
        
    }

    handleTileClick(evt) {
        
       
        // This component wants to emit a productselected event to its parent
        const event = new CustomEvent('accountselected',{
            detail: evt.detail,});
        // Fire the event from c-list
        this.dispatchEvent(event);
    }
}

解决方法

您似乎想通过将 valueType 作为过滤器的 getAccList 方法访问帐户记录。

当您在 handleChange 中对 getAccList 进行命令式调用时，它不会自动更新属性值，因为它应该返回一个承诺。

要解决它，解决方案如下：

要么使用 then-catch 来处理响应，然后分配给类属性。

或

使用参数化的线作为

@wire(getAccList,{ valueType: '$valueType'}) accounts;

这将在更改 valueType 值时自动根据值类型过滤器自动提供帐户记录

javascript lwc