Angular ngFor sees string array as one string

Question

I have a popup dialog, which recieves a list of strings from the backend. I want to print every string as a list item, using ngFor. But when the dialog pops up, the whole array is shown as one concatenated string.

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>

**opening matdialog with method: **

openDialog(dogid:any): void {
    

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

console output from dialog logging

dialog window

You should use {{value}} (the name of the variable in let value of needs) (your'e using {{needs}}) — Eliseo
– Eliseo, Commented Mar 15, 2022 at 8:42

Chris Hamilton · Accepted Answer · 2022-03-15 04:55:14Z

1

By your logging, the data is a 2D array with the list you want as the first element.

this.needs = data[0];

should work, but it seems like either your getDogNeeds() function or your back end is returning data in the wrong format.

answered Mar 15, 2022 at 4:55

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shahiq572 Over a year ago

I had a similar issue, my data coming from back end was formatted like Array["str1,str2"] so I had to split that up. But the OP has a small mistake in their code <li>{{needs}}</li> should be <li>{{value}}</li>

Collectives™ on Stack Overflow

Angular ngFor sees string array as one string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related