Können Datensätze an eine Sammlung übergeben und in einer Lightning-Webkomponente angezeigt werden?

Question

Ich erstelle eine Lightning-Webkomponente, um Verkäuferdatensätze im Zeitleistenkonzept zu visualisieren. Ich habe mit der kürzlich veröffentlichten API von Salesforce erfolgreich Zeitleistenkomponenten, Stile usw. erstellt und Daten abgerufen. Für weitere Informationen habe ich unten einen Link eingefügt. Ich bin ziemlich neu in JavaScript, also verzeihen Sie mir bitte, wenn es schwerwiegende Fehler gibt.

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

Das Problem entsteht dadurch, dass ich keine Ergebnisse erhalte, wenn ich die Daten abrufe und versuche, die Datensätze basierend auf bestimmten Werten der Felder in verschiedene Sammlungen aufzuteilen. Ich verwende for:each in HTML, um meine Sammlung aufzurufen, aber es werden keine Datensätze angezeigt.

Ich denke, das Problem liegt in der for-Schleife, die die Daten an die Sammlung anhängt, aber ich bin mir nicht sicher. Ich habe data[x] 更改为 this.records[x] hinzugefügt und es führt zum gleichen Ergebnis. Ich freue mich über jeden Hinweis und freue mich über jede konstruktive Kritik.

Bitte beachten Sie, dass die Datensätze angezeigt werden, wenn ich die von der API bereitgestellte Datensatzsammlung verwende.

Timeline.js

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;
        }

    }

Timeline.html

<lightning-tab label="All Tasks" value="All Tasks" title = "All Tasks">
   <div style="overflow-x: scroll; height:130px;">
      <div class="tasks-container">
         <template for:each={CompletedTasks} for:item="rec">
            <div key={rec.fields.Id.value}>
               <template if:true={CompletedTasks}>
                  <div class="task-card">
                     <ul class="slds-has-dividers_around-space" draggable="true">
                        <li class="slds-item">
                           <article class="slds-tile slds-tile_board">
                              <h3 class="slds-tile__title slds-truncate" title="Journey Name">
                                 <p style = "font-weight: 600;">Web Development Onboarding</p>
                              </h3>
                              <div class="slds-tile__detail">
                                 <div class="slds-text-heading_small">
                                    <a>
                                    {rec.fields.Name.value}
                                    </a>
                                 </div>
                                 <p class="slds-truncate" title="Esimated Completion Date:">Esimated Completion Date:</p>
                                 <div class = "statusdate">
                                    <p class="slds-truncate" title="Date" style = "width: 200px;">{rec.fields.Estimated_Completion_Date__c.value}</p>
                                    <div class = "statusbuttoncomplete">
                                       <span class="slds-badge slds-theme_success">{rec.fields.Completion_Status__c.value }</span>
                                    </div>
                                 </div>
                              </div>
                           </article>
                        </li>
                     </ul>
                  </div>
               </template>
            </div>
         </template>
      </div>
   </div>
</lightning-tab>

Answer 1

循环中几乎没有语法错误。

• 没有 data.length 因为 data 是一个对象，而不是数组。您需要 data.records.length。
• 对字段值的访问必须类似于 html 部分（rec.fields.Completion_Status__c.value）中的内容，如果您只是转到 data[x].Completion_Status__c === "Completed" 您正在比较字符串又是复杂的对象。是的，这与您使用从 Apex 发送的数据时不同，并且有点烦人，但这是适合您的标准 LWC / UI 记录 API...
• 这是 array.push()，而不是 append()。
• 和 html - 要么您没有粘贴所有内容，要么 Lightning-tab 周围有一些可疑的东西，没有渲染任何内容。

尝试使用此方法（它会转换为显示帐户案例，并非每个人都会拥有您的自定义任务__c）

import { LightningElement,api, wire, track} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';

export default class Stack74031191 extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Cases',
        fields: ['Case.Id','Case.Subject', 'Case.CreatedDate', 'Case.Status'],
        sortBy: ['Case.CreatedDate'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;

            for (let i = 0; i < data.records.length; ++i) {
                let r = data.records[i];
                let status = r.fields.Status.value;
                if (status === "Closed") {
                    this.CompletedTasks.push(r);
                } else if (status === "New") {
                    this.InProgressTasks.push(r);
                }
            }
            // this.CompletedTasks = JSON.parse(JSON.stringify(this.CompletedTasks));
            // this.InProgressTasks = JSON.parse(JSON.stringify(this.InProgressTasks));
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }
    }
}

    55.0
    true
    
        lightning__RecordPage