记录可以传递到集合中并显示在 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