Angular表格初始渲染异常：仅显示单行内容，选文件后恢复

API返回包含两个对象的数组，我用*ngFor循环生成表格行，但初始渲染时，表格虽生成两行，只有第一行能正常显示file_type_id、状态和文件扩展名下拉选项；点击第二行的文件选择框并选择文件后，第二行的所有数据才突然正常显示。推测是Angular的渲染更新机制出了问题，以下是相关代码和问题现象说明：

HTML代码 #

<div class="card" >
  <hr>
  <div class="card-header">
    <h2>Bank Statements of {{this.selectedOptionProduct}}</h2>
  </div>
  <div class="card-body">
    <div class="loading-spinner" *ngIf="productSelectedForLoading && loading">
      <div class="spinner"></div>
    </div>
    <table class="table" >
      <thead>
        <tr>
          <th>Product Name</th>
          <th>File Uploads</th>
          <th>Status</th>
          <th> File extenstion </th>
        </tr>
      </thead>
      <tbody>
        
        <tr *ngFor="let row of tableData " >
          <td>{{ row.file_type_id }}</td>
          <td>
            <input type="file"  #fileInput [value]="row.file_type_id" (change)="onFileSelected($event, row)">
            <button (click)="uploadFile(row)">Upload</button>
            <button (click)="resetFileInput(fileInput)">Reset</button>
          </td>
          <td>{{ row.status }}</td>
          <td>
            <select (change)="onOptionSelectedExtention($event.target)" >
              <option>Select one </option>
              <option *ngFor="let extention of row.file_extensions" mat-menu-item [value]="extention" >{{extention}}</option>
              
            </select>
          </td>
        </tr>
     
      </tbody>
    </table>
</div>

Component.ts代码 #

tableData: any[] = [];

selectedExtention: string;

loading: boolean = true;


onOptionSelectedExtention(selectedOption: any) {
    this.selectedExtention = selectedOption.value;
    console.log(this.selectedExtention);
}

async getTableData(selectedProduct: any) {
    try {
        const url = `API?product_id=${selectedProduct}`;
        const response = await axios.get(url);
        const data = response.data;

        this.tableData = data;
        this.loading = false;
        console.log(this.tableData);

        // Flatten the tableData array
        this.flattenedTableData = this.tableData.reduce((accumulator, row) => {
            return accumulator.concat(row.items);
        }, []);
        console.log(this.flattenedTableData);

        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

resetFileInput(fileInput: HTMLInputElement) {
    fileInput.value = ''; // Reset the value of the file input field
}

onFileSelected(event: any, row: any) {
    row.selectedFile = event.target.files[0];
    console.log(row.selectedFile['name']);
}

uploadFile(row: any) {
    const file = row.selectedFile;
    console.log(file);
    
    if (file) {
        const formData = new FormData();
        formData.append('file', file);

        // Make an HTTP request to upload the file
        this.http.post('your-upload-api-url', formData)
            .subscribe(
                response => {
                    // Handle success response, e.g., update status
                    row.status = 'Uploaded';
                },
                error => {
                    console.log("hello");
                }
            );
    }
}

问题现象 #

1. 初始渲染异常：表格生成两行，但第二行的file_type_id、status和文件扩展名下拉框均为空，仅第一行正常显示。
2. 选择文件后恢复正常：点击第二行的文件选择框并选择任意文件后，第二行的所有数据和下拉选项立即正常显示。
3. API响应正常：接口返回的数组包含两个完整对象，每个对象都有file_type_id、status、file_extensions等必填字段，无缺失。

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