如何使用for循环、本地数组配合*ngFor并处理SharePoint API请求

Let's walk through how to implement both of your requirements clearly, with practical code examples.

1. 使用*ngFor遍历本地数组渲染数据 #

First, once you've fetched your data from SharePoint and stored it in a component property (like doctypes), you can use Angular's *ngFor directive to loop through the array and render each item in your template.

Component Class Setup (Snippet) #

First, make sure you have a property to hold your data:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-document-types',
  templateUrl: './document-types.component.html',
  styleUrls: ['./document-types.component.css']
})
export class DocumentTypesComponent implements OnInit {
  doctypes: any[] = []; // Initialize empty array to hold SharePoint data
  item: string = "YourSystemTitle"; // Replace with your actual system title value

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // We'll add the SharePoint API call here next
  }
}

Template Rendering (HTML) #

In your component's HTML, use *ngFor to iterate over doctypes and display the relevant fields. Since each item has a nested Source array, you can nest another *ngFor to render those:

<div class="document-type-container">
  <h3>Document Types</h3>
  <div *ngFor="let docType of doctypes" class="doc-type-card">
    <h4>{{ docType.Title }}</h4>
    <p>Related Sources:</p>
    <ul>
      <li *ngFor="let source of docType.Source">{{ source.Title }}</li>
    </ul>
  </div>
</div>

2. 处理SharePoint REST API请求 #

Let's refine your API call to be cleaner (using template literals instead of string concatenation, which is safer and more readable) and integrate it into the component's ngOnInit method.

Updated API Call in Component #

Replace the empty ngOnInit with this code:

ngOnInit(): void {
  const apiUrl = `https://example.com/_api/web/lists/getbytitle('ImagingDocumentTypes')/items?$select=Title,Image,Source/Title,System/Title&$orderBy=Title&$expand=Source,System&$filter=System/Title eq '${this.item}'`;

  this.http.get(apiUrl).subscribe((response: any) => {
    this.doctypes = response.value; // Assign the fetched items to your array
    console.log('Fetched document types:', this.doctypes); // Optional: debug log
  }, (error) => {
    console.error('Error fetching data:', error); // Handle errors gracefully
  });
}

Key API Parameter Explanations #

Let's break down what each part of the API query does:

• $select=Title,Image,Source/Title,System/Title: Specifies exactly which fields you want to retrieve (reduces payload size)
• $orderBy=Title: Sorts the results alphabetically by the Title field
• $expand=Source,System: Fetches the nested data from the related Source and System lookup fields (critical for accessing Source/Title and System/Title)
• $filter=System/Title eq '${this.item}': Filters the results to only include items where the related System's Title matches your this.item value

Important Notes #

• Security: If this.item comes from user input, make sure to sanitize it to avoid SQL injection-like issues in the SharePoint API filter.
• Type Safety: For better maintainability, consider creating TypeScript interfaces for your SharePoint items instead of using any:

  interface SharePointSource {
    Title: string;
  }
  
  interface SharePointDocType {
    Title: string;
    Image?: string;
    Source: SharePointSource[];
    System: { Title: string };
  }
  
  // Then update your property:
  doctypes: SharePointDocType[] = [];
  

Full Working Example #

Putting it all together, your component will fetch the data on initialization, store it in doctypes, and the template will automatically render each item as soon as the data arrives.

Just remember to make sure your Angular app has the HttpClientModule imported in your AppModule (or a feature module) to use the HttpClient service!

内容的提问来源于stack exchange，提问作者cfoster5