CODEWITHSUNDEEP
angularngfor
Qwertycal
Qwertycal

Reputation: 21

angular *ngFor print value with param

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"
    }
  ]
}

Upvotes: 1

Views: 1685

Answers (3)

Velusamy Venkatraman
Velusamy Venkatraman

Reputation: 736

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>

Upvotes: 3

AntonioGarc&#237;a
AntonioGarc&#237;a

Reputation: 1150

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.

Upvotes: 2

Zlatko
Zlatko

Reputation: 19569

In this case you can simply use different notation:

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

Upvotes: 1

Related Questions