lwc - LWC - 包装器对象值在输入标签值更改时无效

Question

我有一个 Apex 方法，它将包装类列表作为 JSON 字符串返回

让 LWC js 控制器在其中调用该方法，connnectedCallback()并将包装器列表分配给一个属性，该属性使用基本的 html 标记以及 LWC中定义的其他属性以及其他属性this.coreAttributes显示在页面中。下面给出的代码。htmlnoOfBlocksfaltHierarchy

当我在coreAttribute's相关输入字段中输入一些值并在noOfBlocks输入字段中输入一些值时，在coreAttribute相关字段中输入的值消失了。请检查随附的 gif 并帮助我解决此问题。

图片：https ://easyupload.io/g1h772

@AuraEnabled(cacheable=true)
    public static String queryCoreAttributes() {
        List<Core_Attribute__c> coreAttributesList = new List<Core_Attribute__c>();
        Map<Id,List<String>> picklistValuesToPicklistMasterMap = new Map<Id,List<String>>();

        coreAttributesList = [SELECT Id, Name, Data_Type__c, Type__c, Picklist_Master__c 
            FROM Core_Attribute__c WHERE Base_Asset_Name__c IN (SELECT Id FROM Base_Asset_Template__c WHERE Name = 'Base PV Plant') 
            ORDER BY Name ASC];

        picklistValuesToPicklistMasterMap = Utils.getPicklistValues(); 

        System.debug(' picklistValuesToPicklistMasterMap '+ picklistValuesToPicklistMasterMap);

        List<coreAttributesWrapper> coreAttributesWrapperList = new List<coreAttributesWrapper>();
        for(Core_Attribute__c coreAttribute : coreAttributesList){
            coreAttributesWrapper coreAttWrapper = new coreAttributesWrapper();
            coreAttWrapper.attributeHeader = coreAttribute.Name;
            coreAttWrapper.attributeDataType = coreAttribute.Data_Type__c.toLowerCase();
            coreAttWrapper.picklistValues = (coreAttribute.Data_Type__c == 'Picklist') ? picklistValuesToPicklistMasterMap.get(coreAttribute.Picklist_Master__c): null;
            coreAttWrapper.isPicklist = (coreAttribute.Data_Type__c == 'Picklist');
            coreAttWrapper.attributeValue = '';
            coreAttributesWrapperList.add(coreAttWrapper);
        }
        System.debug(' core Att '+ coreAttributesWrapperList);
        return JSON.serialize(coreAttributesWrapperList);
    }

JS

import { LightningElement, track, api } from "lwc";
import getPlantAssetRecord from "@salesforce/apex/P1PlantInfoPromptSolar.queryPlantAssetRecord";
import queryCoreAttributes from "@salesforce/apex/P1PlantInfoPromptSolar.queryCoreAttributes";
import saveP1PlantInfoPromptMetadata from "@salesforce/apex/P1PlantInfoPromptSolar.saveP1PlantInfoPromptMetadata";

export default class P1PlantInfoPromptSolar extends LightningElement {
  @api plantAssetId='';
  @track plantAssetDetail;
  @track coreAttributes;
  @track noOfBlocks='';
  @track flatHierarchy=false;
  @track drivePlus=false;
  @track promptSpecificAttributes;
connectedCallback() {
    console.log(' connected callback ');
    getPlantAssetRecord({
        recordId: 'a060p000001hGLxAAM',
    })
    .then(result => {
      this.plantAssetDetail = result;
    })
    .catch(error => {
      this.error = error;
    });

    queryCoreAttributes()
    .then(result => {
      console.log(' result ' + result);
      console.log(' JSON result ' + JSON.parse(result));
      this.coreAttributes = JSON.parse(result);
    }) 
    .catch(error => {
      this.error = error;
    });
  }

inputTagValueChangeHandler(event){
    console.log(' test '+ JSON.stringify(this.coreAttributes));
    console.log(' value -> '+ event.target.value + ' name -> ' + event.target.name);

    if(event.target.name === 'Blocks') this.noOfBlocks = event.target.value;
    if(event.target.name === 'Flat Hierarchy') this.flatHierarchy = event.target.value;
    if(event.target.name === 'Drive+') this.drivePlus = event.target.value; 
  }

HTML

    <tr data-row="1">
                  <th># Blocks</th>
                  <td><input type="number" name="Blocks" 
                    value={noOfBlocks} onchange={inputTagValueChangeHandler}/></td>
                </tr>
                <tr data-row="2">
                  <th>Flat Hierarchy</th>
                  <td><input type="checkbox" name="Flat Hierarchy" 
                    value={flatHierarchy} onchange={inputTagValueChangeHandler}/></td>
                </tr>
                <tr data-row="2">
                  <th>Drive+</th>
                  <td><input type="checkbox" name="Drive+" 
                    value={drivePlus} onchange={inputTagValueChangeHandler}/></td>
                </tr>
    <template for:each={coreAttributes} for:item="coreAttribute">
                  <tr key={coreAttribute.key}>
                    <th>{coreAttribute.attributeHeader}</th>
                    <td>
                      <template if:false={coreAttribute.isPicklist}>
                        <input type={coreAttribute.attributeDataType} name={coreAttribute.attributeHeader}
                         value={coreAttribute.attributeValue}/>
                      </template>
                      <template if:true={coreAttribute.isPicklist}>
                        <select size="1" name={coreAttribute.attributeHeader}>
                          <option value="None">--None--</option>
                          <template for:each={coreAttribute.picklistValues} for:item="attributePickValues">
                            <option key={coreAttribute.key} value={coreAttribute.attributeValue}>{attributePickValues}</option>
                          </template>
                        </select>
                      </template>
                    </td>
                  </tr>
                </template>