記錄可以傳遞到集合中並顯示在 Lightning Web 元件中嗎？

Question

我正在建立一個閃電 Web 元件，以在時間軸的概念中視覺化銷售人員記錄。我已經成功創建了時間軸元件、樣式等，並使用 salesforce 最近發布的 API 檢索資料。我在下面提供了一個鏈接，以獲取更多資訊。 我對 JavaScript 還很陌生，所以如果有任何嚴重的錯誤，請原諒我。

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

問題來自於當我檢索資料並嘗試根據欄位的特定值將記錄拆分為不同的集合時，它不會產生任何結果。我在 HTML 中使用 for:each 來呼叫我的集合，但沒有顯示任何記錄。

我認為問題在於將資料附加到集合的 for 循環，但我不確定。我已將 data[x] 更改為 this.records[x] ，它產生相同的結果。我很感激任何指點，並歡迎任何建設性的批評。

請注意，當我使用 API 提供的記錄集合時，會顯示記錄。

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

    }

時間軸.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