【问题标题】：angular *ngFor print value with paramangular *ngFor 带参数的打印值
【发布时间】：2018-05-22 15:06:23
【问题描述】：

我尝试使用参数运行 *ngFor。

我想按参数输出消息，例如 {{data.lang}}

谢谢。

我的代码如下：

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

【问题讨论】：

您的问题到底是什么？这段代码不适合你吗？
你有什么错误吗？
这是一个合理的问题。他在“数据”对象上没有“语言”属性，因此表达式值将是未定义的，没有错误，呈现空字符串。
其打印{{data.en}} in a loop

标签： angular ngfor

【解决方案1】：

你可以这样试试……

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

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

【讨论】：

【解决方案2】：

在您的代码中，您尝试将 *ngFor 与只有一个元素的数组一起使用。键也是错误的，因为数据没有“en”元素。这就是为什么您的输出将为空的原因。

如果你想显示对象中每个键值对的信息，你可以使用 Angular Pipes。你也可以看到这个SO answer关于它。

【讨论】：

管道是要走的路

【解决方案3】：

在这种情况下，您可以简单地使用不同的符号：

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

【讨论】：

他想为每次迭代打印语言键。因此，实际上，他需要使用ngFor 迭代对象。因此 > 需要管道或迭代 Object.keys(data)...
你确定这是他想要做的吗？在我看来，他似乎想根据预选的语言显示密钥。例如。如果用户在其他地方选择 lang = 'en'，这应该更新并显示每个 'data' 的 'en' 值。
我还不确定:) 对我来说听起来就是这样