Can't use *ngFor to list an array of strings (Angular)

Question

So I'm trying to exibit information from an array of strings. This array includes data that may change from one element to another (like one has contact information, the other has contact information and address, etc).

I was trying to exibit the element, but I can't. Here's my HTML snippet:

<ul *ngFor="let dp of consentimento.dadosPessoais">
    <li>
      {{dp}}
  </li> 
</ul>

I can already access other data in "consentimento", but not this array in this *ngFor. If I simply put {{consentimento.dadosPessoais}} outside of the loop I get [object Object].

The console gives me this error:

core.js:4352 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3193)
    at callHook (core.js:3109)
    at callHooks (core.js:3075)
    at executeInitAndCheckHooks (core.js:3027)
    at selectIndexInternal (core.js:6264)
    at Module.ɵɵadvance (core.js:6246)
    at DialogDetalharConsentimentoComponent_Template (dialog-detalhar-consentimento.component.html:62)
    at executeTemplate (core.js:7449)
    at refreshView (core.js:7318)
    at refreshComponent (core.js:8465)

I've been trying this for three days now, with zero success. I really need some help.

import { ActivatedRoute } from '@angular/router'; 
import { TemplateConsentimentoDTO } from '../../../../model/template.dto';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-template-dialog',
  templateUrl: './template-dialog.component.html'
})
export class TemplateDialogComponent implements OnInit {

  acao:string="";
  idEmpresa:number=0;
  idTemplate?:number; 

  constructor(
    public dialogRef: MatDialogRef<TemplateDialogComponent>, 
    private route: ActivatedRoute, 
    @Inject(MAT_DIALOG_DATA) public template: TemplateConsentimentoDTO){}
  
  ngOnInit(): void { 
    this.route.queryParams.subscribe(params=>{
      this.acao=params['acao'];
      this.idEmpresa=params['uuid'];
      this.idTemplate=params['template'];})  
  }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

By the way, here's the DTO for consentimento:

export class ConsentimentoDTO {

public id: string | undefined;
public idTemplate: number | undefined;
public idEmpresa: number | undefined;
public nomeTemplate: string | undefined;
public descricaoTemplate: string | undefined;
public cpfCoresponsavel: string | undefined;
public cpfResponsavel: string | undefined;
public dataInicio: Date | undefined;
public dataFim: Date | undefined;
public status: string | undefined;
public dadosPessoais?: string[]| undefined;
public tratamentoDados: string[]| undefined;
public template: TemplateConsentimentoDTO | undefined;
public dataSolicitacao: Date | undefined;
public solicitante: string | undefined;
public empresaSelecionada: EmpresaElement | undefined
}

Hi Matheus, what can you see in the log if you console.dir(...) it in the component? — Jaqen H'ghar
– Jaqen H'ghar, Commented Apr 9, 2021 at 20:36
@JaqenH'ghar, when i log the console it returns the object with its elements. — Matheus Nascimento
– Matheus Nascimento, Commented Apr 11, 2021 at 19:33
may be it’s undefined ? try ... of (consentimento.dadosPess || [])and go from there — fastAsTortoise
– fastAsTortoise, Commented Apr 11, 2021 at 23:53

Anders · Accepted Answer · 2021-04-10 04:25:22Z

2

I think what you're experiencing is a mismatch of what you expect (the contract your ConsentimentoDTO is trying to enforce), and what you're actually getting (the response from your backend).

Have a look at the network traffic in your browser's devtools, and assert that the dadosPessoais-property of your ConsentimentoDTO is actually returning a string[].

That would also be what you're seeing that string-interpolating the value produces [object Object].

answered Apr 10, 2021 at 4:25

Anders

7003 silver badges13 bronze badges

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

2 Comments

Matheus Nascimento Over a year ago

I need to display the information in this object, which I'm failing to see why it's not working.

Anders Over a year ago

I get that, but remember that the type-information of typescript interfaces and classes are removed at transpilation time. Hence, there's no guarantee that the server will return what you expect.

Ebay Eliav · Accepted Answer · 2021-04-11 22:19:10Z

0

Like @andres said before. The value of

consentimento.dadosPessoais

Is not string[] It's probably string. And this is the error you get Because ngFor can work only on iterated objects like array and not on simple string. Try to display outside the loop

consentimento.dadosPessoais[0]

And see if you get correct values

edited Apr 11, 2021 at 22:19

answered Apr 11, 2021 at 22:09

Ebay Eliav

536 bronze badges

Comments

Matheus Nascimento · Accepted Answer · 2021-04-12 15:42:13Z

0

I was trying different things when I found this solution that worked, if anybody is interested:

<mat-nav-list>
    <mat-list-item *ngFor="let dp of consentimento.dadosPessoais">
        {{dp}}                       
    </mat-list-item>
</mat-nav-list>

answered Apr 12, 2021 at 15:42

Matheus Nascimento

111 silver badge4 bronze badges

2 Comments

Jaqen H'ghar Over a year ago

Sounds a little strange to me, since the original error said that consentimento.dadosPessoais is not an iterable and you did'nt change that

Matheus Nascimento Over a year ago

I'm also confused... Trying to see if I did anything wrong beyond that

Pykara_Developer · Accepted Answer · 2022-06-03 08:07:01Z

0

You should use the *ngFor in the .

For example:

<ul>
<ng-container *ngFor="let dp of consentimento.dadosPessoais">
    <li>
      {{dp}}
  </li> 
<ng-container>
</ul>

answered Jun 3, 2022 at 8:07

Pykara_Developer

3362 silver badges6 bronze badges

Collectives™ on Stack Overflow

Can't use *ngFor to list an array of strings (Angular)

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related