레코드를 컬렉션으로 전달하고 Lightning 웹 구성 요소에 표시할 수 있습니까?

Question

영업사원 기록을 타임라인 개념으로 시각화하기 위해 라이트닝 웹 구성 요소를 만들고 있습니다. 타임라인 구성요소, 스타일 등을 성공적으로 생성하고 Salesforce에서 최근 출시된 API를 사용하여 데이터를 검색했습니다. 자세한 내용을 보려면 아래 링크를 포함했습니다. 저는 JavaScript를 처음 접하기 때문에 심각한 실수가 있어도 용서해 주세요.

https://developer.salesforce.com/docs/comComponent-library/documentation/en/lwc/lwc.reference_wire_adapters_get_lated_list_records

문제는 데이터를 검색하고 필드의 특정 값을 기반으로 레코드를 다른 컬렉션으로 분할하려고 할 때 어떤 결과도 생성되지 않는다는 점에서 발생합니다. 내 컬렉션을 호출하기 위해 HTML에서 for:each를 사용하고 있는데 기록이 표시되지 않습니다.

컬렉션에 데이터를 추가하는 for 루프에 문제가 있는 것 같은데 잘 모르겠습니다. data[x] 更改为 this.records[x]를 추가했는데 결과는 같습니다. 모든 조언에 감사드리며 건설적인 비판을 환영합니다.

API에서 제공하는 기록 컬렉션을 사용하면 기록이 표시되니 주의하세요.

Timeline.js

으아아아

Timeline.html

import { LightningElement,api, wire, track} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';
export default class timeline extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Tasks__r',
        fields: ['Task__c.Id','Task__c.Name', 'Task__c.Estimated_Completion_Date__c', 'Task__c.Completion_Status__c'],
        sortBy: ['Task__c.Estimated_Completion_Date__c'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;
            for (let x = 0; x < data.length; x++) {
              if (data[x].Completion_Status__c === "Completed") {
                  this.CompletedTasks.append(data[x]);
              } else if (data[x].Completion_Status__c === "In Progress") {
                  this.InProgressTasks.append(data[x]);
              } else if (data[x].Completion_Status__c === "Overdue") {
                  this.OverdueTasks.append(data[x]);
              }
          }
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }

    }

Answer 1

루프에는 구문 오류가 거의 없습니다.

• 아니요data.length 因为 data 是一个对象，而不是数组。您需要 data.records.length.
• 필드 값에 대한 접근은 html 부분과 유사해야 합니다. (rec.fields.Completion_Status__c.value）中的内容，如果您只是转到 data[x].Completion_Status__c === "Completed" 복잡한 개체인 문자열을 비교하고 있습니다. 네, Apex에서 보낸 데이터를 사용할 때와 다르고 조금 귀찮지만 이 부분은 LWC/UI Logging API에 적합한 표준...
• 어레이입니다.push()，而不是 append().
• 및 html - 모든 내용을 붙여넣지 않았거나 Lightning 탭 주변에 아무것도 렌더링하지 않는 수상한 내용이 있습니다.

이 방법을 사용해 보세요(계정 케이스를 표시하도록 변환되지만 모든 사람이 사용자 정의 작업을 수행하지는 않습니다__c)

으아아아 으아아아 으아아아