代码之家  ›  专栏  ›  技术社区  ›  Lorenzo Bertolaccini

在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

  •  1
  • Lorenzo Bertolaccini  · 技术社区  · 5 月前

    我用来传递数据的方法:

     openDossiersList(): void { 
            if (this.selectedDossier) {
              this.dialog.open(DossiersListDialogComponent, {
                width: '400px',
                data: { selectedDossiers: [...this.lavoriMultipli.multipleWorks] } 
              });
            }
          }
    

    档案列表对话框组件的HMTL:

    <div class="modal-overlay" (click)="onOverlayClick()">
        <h1 style="font-size: larger; display: flex; justify-content: center;">
          Lista Lavorazioni Selezionate
        </h1>
      
        <ul *ngIf="selectedDossiers?.length > 0">
            <li *ngFor="let dossier of selectedDossiers">
              <p>{{ dossier?.PraticaNumero }}</p>
            </li>
          </ul>
          
          
      </div>
    

    TS档案列表对话框组件:

    import { Component, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
    import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
    import { MultipleWork } from 'src/app/models/multiple-work';
    
    @Component({
      selector: 'app-dossiers-list-dialog',
      standalone: true,
      templateUrl: './dossiers-list-dialog.component.html',
      styleUrls: ['./dossiers-list-dialog.component.scss']
    })
    export class DossiersListDialogComponent {
      selectedDossiers: MultipleWork[] = [];
    
      constructor(
        private dialogRef: MatDialogRef<DossiersListDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: { selectedDossiers: MultipleWork[] },
      ) {
        this.selectedDossiers = data.selectedDossiers;
      }
    
     
    
      onOverlayClick(): void {
        this.dialogRef.close();
      }
    }
    

    问题是ul及其内部的所有内容根本不会显示,即使数据以正确的方式发送到对话框组件。

    我做了几个测试,以确保数组以正确的方式发送并且正常工作,因为每个console.log(此代码中未显示)都显示了正确的数据集。我想知道这是否是关于加载优先级的问题?就像HTML在数据处理之前被加载,所以它没有显示出来一样?这是我第一次遇到这个问题,老实说,我不知道问题是什么。

    1 回复  |  直到 5 月前
        1
  •  2
  •   Naren Murali    5 月前

    您必须导入其中之一 NgIf NgFor 或者简单地导入 CommonModule 在HTML中使用这些结构指令。因为您的组件是独立的:

    import { Component, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
    import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
    import { MultipleWork } from 'src/app/models/multiple-work';
    import { CommonModule } from '@angular/common';
    
    @Component({
      selector: 'app-dossiers-list-dialog',
      standalone: true,
      imports: [CommonModule],
      templateUrl: './dossiers-list-dialog.component.html',
      styleUrls: ['./dossiers-list-dialog.component.scss']
    })
    

    如果您使用的是angular 18及更新版本,请尝试使用更新的控制流,它没有导入,编写起来更容易: Angular Docs - Control flow

    <div class="modal-overlay" (click)="onOverlayClick()">
      <h1 style="font-size: larger; display: flex; justify-content: center;">
        Lista Lavorazioni Selezionate
      </h1>
      @if(selectedDossiers?.length > 0) {
        <ul>
          @for (dossier of selectedDossiers) {
            <li>
              <p>{{ dossier?.PraticaNumero }}</p>
            </li>
          }
        </ul>
      }
    </div>