Angular ngFor 将字符串数组视为一个字符串

Question

我有一个弹出对话框，它从后端接收字符串列表。我想使用 ngFor 将每个字符串打印为列表项。但是，当弹出对话框时，整个数组将显示为一个串联字符串。

needs-dialog.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MatDialogRef} from "@angular/material/dialog";

@Component({
  selector: 'app-needs-dialog',
  templateUrl: './needs-dialog.component.html',
  styleUrls: ['./needs-dialog.component.css']
})
export class NeedsDialogComponent implements OnInit {

  needs!: String[];

  constructor( private dialogRef: MatDialogRef<NeedsDialogComponent>, @Inject(MAT_DIALOG_DATA) data) 
  {
    console.log("logging data:")
    console.log(data); 
    this.needs=data 
    console.log("logging needs array in NeedsDialogComponent:");
    console.log(this.needs);
  }

  ngOnInit(): void {
  }

  close() {
    
    this.dialogRef.close();
  }

}

needs-dialog.component.html

<h2 mat-dialog-title>Szükségletek</h2>
<mat-dialog-content >
<ul *ngFor="let value of needs; index as i" >
<li>{{needs}}</li>
</ul>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

**使用方法打开matdialog：**

openDialog(dogid:any): void {
    

    this.matdialog.open(NeedsDialogComponent, {data:this.getDogNeeds(Number(dogid)),width: '500px',
    height: '500px'});
  }

对话框日志记录的控制台输出

对话框窗口

Answer 1

根据您的记录，数据是一个二维数组，其中您想要的列表作为第一个元素。

this.needs = data[0];

应该可以工作，但似乎您的 getDogNeeds() 函数或您的后端以错误的格式返回数据。