Angular 2：从类中获取数据答案

【问题标题】：Angular 2: getting data from a ClassAngular 2：从类中获取数据
【发布时间】：2017-06-07 12:38:11
【问题描述】：

我为我的应用的默认设置创建了一个类。但我不知道如何从该类中获取数据并在我的 html 中使用它。我尝试了一个可观察的，但这并没有真正起作用。

我的班级是这样的：

export class Instellingen {
  urenTotBehandeling: number = 4;
  toonNaam: boolean = true;
  toonTijd: boolean = true;
  toonType: boolean = true;
  toonSanitair: boolean = true;
  toonKinder: boolean = true;
  toonSalon: boolean = true;
  toonKamerNummer: boolean = true;
  uren = [
    {value: 1, label: '1 uur'},
    {value: 2, label: '2 uren'},
    {value: 3, label: '3 uren'},
    {value: 4, label: '4 uren'}         ];
  hulpKleur:string= "red";
  behandelKleur:string = "orange";
  volKleur:string="green";
  leegKleur:string="white";    }

【问题讨论】：

例如导出类 OtherClass { 构造函数(){ 让 a = new Instellingen(); a.toonKamerNummer; } }
我不想将它导出到另一个类。我想在我的 html 中使用它。

标签： angular angular2-services angular2-components

【解决方案1】：

从应用程序中的类获取默认设置的最佳方法是：

创建服务并将其添加到您的 AppModule/模块中的 Provider
导入该服务并将其注入组件的构造函数中
在您的代码中使用它。

【讨论】：

是的，我一直在尝试为此创建服务。但我对如何做到这一点有疑问。我可以使用服务从 json 文件中获取数据，这可能更容易，所以我觉得有点傻:)

【解决方案2】：

这是一个如何使用它的示例：

let i: Instellingen=new Instellingen();
console.log(i.urenTotBehandeling); // 4

希望对你有帮助:)

【讨论】：

谢谢，但我正在尝试创建服务或其他东西，以便我可以在我的 html 中轻松使用它:)
@KlaartjeDeBacker 您可以创建一个变量，您可以直接在 html 中使用它而无需创建类：let Instellingen ={ "urenTotBehandeling": 4, "toonNaam":true, "toonTijd": = true, //... "uren" : [ {value: 1, label: '1 uur'}, {value: 2, label: '2 uren'}, {value: 3, label: '3 uren'}, {value: 4, label: '4 uren'} ], //.. } 在您的 html 中：<span> {{Instellingen.urenTotBehandeling}} </span>
我尝试了这种方法，但是当我输入 {{Instellingen.urenBehandeling}} 时，我得到无法读取未定义的属性 'urenBehandeling'
您是否在您的打字稿文件中定义了Instellingen？你能告诉我你的部分代码吗？
没关系，我只需输入 {{urenTotBehandeling}} 就能解决它

【解决方案3】：

import { Component } from '@angular/core'    
import { NgForm } from '@angular/forms'    
@Component({
selector :'ang-model',
template :`
Model :<input [(ngModel)] ='name' /> // Data Binding 
       {{name }} // string interpolation`
})
export class AngModelComponent{
       name : string = "Practice ";
}

试试上面的数据绑定和字符串插值的方法

【讨论】：