angular *ngFor print value with param

Question

I trying to run *ngFor with params.

I want to output messages by param, example {{data.lang}}

Thanks.

My code goes like:

-=app.component.html=-

{{lang}}
<div>
  <ul>
    <li *ngFor = "let data of datas">{{data.en}}</li>
  </ul>
</div>

-=app.component.ts=-

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  lang: string = 'en';
  datas: any = [
    {
      "ru": "время деньги.",
      "en": "time is money",
      "fr": null,
      "it": "il tempo è denaro",
      "de": "Zeit Geld",
      "es": "el tiempo es dinero",
      "pt": "tempo é dinheiro",
      "pl": "czas i pieniądze"
    }
  ]
}

What exactly is your question? Is this code not working for you? — AntonioGarcía, May 22 '18 at 06:39
It's a legitimate question. He doesn't have 'lang' property on 'data' object, so the expression value would be undefined, without error, rendering empty string. — Zlatko, May 22 '18 at 06:41

score 3 · Answer 1 · answered May 22 '18 at 07:06

3

You Can try like this...

    val(dat){
   return getData[this.lang]
    }

  {{lang}}
<div>
  <ul>
    <li *ngFor = "let data of datas">{{getData(data)}}</li>
  </ul>
</div>

answered May 22 '18 at 07:06

Velusamy Venkatraman

726
4
16

score 2 · Answer 2 · answered May 22 '18 at 06:45

2

In your code you are trying to use *ngFor with an array with only one element. The key is also wrong as data has no "en" element. This is why your output will be empty.

If you want to show information about every key-value in an object you can use Angular Pipes. You can also see this SO answer about it.

answered May 22 '18 at 06:45

AntonioGarcía

1,140
2
15
25

pipe is the way to go – dee zg May 22 '18 at 06:48

score 1 · Answer 3 · answered May 22 '18 at 06:40

1

In this case you can simply use different notation:

<li *ngFor = "let data of datas">{{data[lang]}}</li>

answered May 22 '18 at 06:40

Zlatko

18,936
14
70
123

he wants to print language key for each iteration. so, in effect, he needs to iterate object using `ngFor`. thus > needs pipe or iterate over `Object.keys(data)`... – dee zg May 22 '18 at 06:49
Are you certain that's what he wants to do? To me it seems as if he wanted to show the the key per pre-selected language. E.g. if the user picks lang = 'en' somewhere else, this should update and show the 'en' value of each of 'data'. – Zlatko May 22 '18 at 13:36
1

i am far from certain:) it just sounded that way to me – dee zg May 22 '18 at 14:48

angular *ngFor print value with param

3 Answers3

You Can try like this...