Les enregistrements peuvent-ils être transmis à une collection et affichés dans un composant Web Lightning ?

Question

Je crée un composant Web Lightning pour visualiser les enregistrements des vendeurs dans un concept de chronologie. J'ai créé avec succès des composants de chronologie, des styles, etc. et récupéré des données à l'aide de l'API récemment publiée de Salesforce. J'ai inclus un lien ci-dessous pour plus d'informations. Je suis assez nouveau dans JavaScript, alors pardonnez-moi s'il y a des erreurs graves.

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

Le problème vient du fait que lorsque je récupère les données et que j'essaie de diviser les enregistrements en différentes collections en fonction de valeurs spécifiques des champs, cela ne produit aucun résultat. J'utilise for:each en HTML pour appeler ma collection mais aucun enregistrement ne s'affiche.

Je pense que le problème vient de la boucle for qui ajoute les données à la collection, mais je n'en suis pas sûr. J'ai ajouté data[x] 更改为 this.records[x] et cela produit le même résultat. J'apprécie tous les conseils et accueille toute critique constructive.

Veuillez noter que lorsque j'utilise la collection d'enregistrements fournie par l'API, les enregistrements sont affichés.

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

Il n'y a presque aucune erreur de syntaxe dans les boucles.

• Non data.length 因为 data 是一个对象，而不是数组。您需要 data.records.length.
• L'accès aux valeurs des champs doit être similaire à la partie html (rec.fields.Completion_Status__c.value）中的内容，如果您只是转到 data[x].Completion_Status__c === "Completed" Vous comparez des chaînes qui sont des objets complexes. Oui, c'est différent que lorsque vous utilisez des données envoyées depuis Apex, et c'est un peu ennuyeux, mais c'est le standard qui fonctionne pour votre API de journalisation LWC/UI...
• C'est un tableau.push()，而不是 append().
• et HTML - soit vous n'avez pas tout collé, soit il y a quelque chose de louche autour de l'onglet Lightning qui ne restitue rien.

Essayez cette méthode (elle sera convertie en cas de compte, tout le monde n'aura pas votre tâche personnalisée__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