Bolehkah rekod dihantar ke koleksi dan dipaparkan dalam komponen web Lightning?

Question

Saya sedang mencipta komponen web kilat untuk menggambarkan rekod jurujual dalam konsep garis masa. Saya telah berjaya mencipta komponen garis masa, gaya, dsb. dan mendapatkan data menggunakan API yang dikeluarkan baru-baru ini. Saya telah sertakan pautan di bawah untuk maklumat lanjut. Saya agak baru dalam JavaScript, jadi harap maafkan saya jika terdapat sebarang kesilapan yang serius.

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

Masalahnya timbul apabila saya mendapatkan semula data dan cuba membahagikan rekod kepada koleksi yang berbeza berdasarkan nilai medan tertentu, ia tidak menghasilkan sebarang hasil. Saya menggunakan for:each dalam HTML untuk memanggil koleksi saya tetapi tiada rekod ditunjukkan.

Saya rasa masalahnya ialah dengan gelung for yang menambahkan data pada koleksi, tetapi saya tidak pasti. Saya telah menambah data[x] 更改为 this.records[x] dan ia menghasilkan hasil yang sama. Saya menghargai sebarang petunjuk dan mengalu-alukan sebarang kritikan yang membina.

Sila ambil perhatian bahawa apabila saya menggunakan koleksi rekod yang disediakan oleh API, rekod dipaparkan.

Garis masa.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;
        }

    }

Garis masa.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

Hampir tiada ralat sintaks dalam gelung.

• Tidak data.length 因为 data 是一个对象，而不是数组。您需要 data.records.length.
• Akses kepada nilai medan mesti serupa dengan bahagian html (rec.fields.Completion_Status__c.value）中的内容，如果您只是转到 data[x].Completion_Status__c === "Completed" Anda membandingkan rentetan yang merupakan objek kompleks. Ya, ini berbeza daripada semasa anda menggunakan data yang dihantar daripada Apex, dan agak menjengkelkan, tetapi ini adalah standard yang sesuai untuk anda API Logging LWC/UI...
• Ini ialah array.push()，而不是 append().
• dan html - sama ada anda tidak menampal semuanya atau terdapat sesuatu yang mencurigakan di sekeliling tab Lightning yang tidak memaparkan apa-apa.

Cuba kaedah ini (ia akan ditukar kepada paparan kes akaun, tidak semua orang akan mempunyai tugas tersuai anda__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