Значение карты JS

@track currentSelectedProduct = '{"01t1s000000j70VAAQ":{"Id":"01t1s000000j70VAAQ","Name":"test","ProductCode":"200299060003","Number__c":"CRM-000001","MOQ__c":10,"StandardCost__c":10,"Description":"Test"}}'

HTML-код

<template>
        <div class="slds-box" if:true={showSelectedRecord}>
            <table class="slds-table">
                <tbody for:each={currentSelectedProduct} for:item="pro" key={pro.id}>
                    <tr class="slds-hint-parent">
                        <td>
                            <div class="slds-truncate" >{pro.Name}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
</template>

Я знаю, что если "currentSelectedProduct" является списком, с этим проблем не будет. Но "currentSelectedProduct" — это карта, что мне нужно сделать?

2
Zhang Ou 24 Авг 2020 в 18:47

2 ответа

Лучший ответ

Вероятно, вам нужно сделать объект итерируемым, чтобы использовать его в операторе for:each. Для этого вы можете создать геттер внутри своего класса. Поскольку компонент будет перерисовываться каждый раз при обновлении данных, результат геттера также будет обновлен. Самый простой вариант — использовать Object.entries, а затем преобразовать массив [key, value] в объект {key: key, value: value}. Пожалуйста, смотрите полный код ниже.

export default class extends LightningElement {
    @track currentSelectedProduct = '{"01t1s000000j70VAAQ":{"Id":"01t1s000000j70VAAQ","Name":"test","ProductCode":"200299060003","Number__c":"CRM-000001","MOQ__c":10,"StandardCost__c":10,"Description":"Test"}}'
    get currentSelectedProductList() {
        return Object.entries(this.currentSelectedProduct).map([key, value] => {key, value});
    }
}
<template>
        <div class="slds-box" if:true={showSelectedRecord}>
            <table class="slds-table">
                <tbody for:each={currentSelectedProductList} for:item="pro" key={pro.key}>
                    <tr class="slds-hint-parent">
                        <td>
                            <div class="slds-truncate" >{pro.value.Name}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
</template>
5
Jack Veromeev 24 Авг 2020 в 18:49

Вам нужно извлечь детали, которые вы хотите представить, в (отслеживаемый) массив вместо карты. Обработка шаблонов LWC довольно проста и обеспечивает только итерацию массива с template for:each.

2
Phil W 24 Авг 2020 в 18:50
Как бы ты это сделал?
 – 
Ben2pop
10 Июн 2021 в 11:27