Angular2：如何将返回服务值放入私有变量对象中？

Posted 2023-02-24

【中文标题】Angular2：如何将返回服务值放入私有变量对象中？

【英文标题】：Angular2: How to put return service value into private variable object?

【发布时间】：2016-10-07 05:05:03

【问题描述】：

我正在创建一个会计系统 UI 并使用 angular2 作为我的框架。

除了将服务值分配给私有变量之外，我的应用程序正在运行。我创建了一项服务以使其更具动态性。

所以，这是我的服务

/* formdata.ts */

export class Formdata 
    viewBy: string;
    companyUnit: string;
    financialYear: string;
    clients: string;

/* 模拟形式 */

从 './formdata' 导入 Formdata

export const FORMDATA: Formdata[] = [
    
        viewBy: 'Daniela Oraa',
        companyUnit: 'BIR - Legazpi',
        financialYear: '2016',
        clients: 'Dummy Text 1'
    
];

/* form.service.ts */

import  Injectable  from '@angular/core';

import  Formdata  from './formdata';
import  FORMDATA  from './mocked-form';

@Injectable()
export class FormService 
  getData(): Promise<Formdata[]> 
    return Promise.resolve(FORMDATA);
  

将服务注入组件

import  Component, OnInit  from '@angular/core';

import  Formdata  from '../formdata';
import  FormService  from '../form.service';

@Component(
  templateUrl: 'app/html-templates/clientdata_balance.html',
  styleUrls: ['css/templates.css'],
  providers: [ FormService ]
)

export class BalanceComponent implements OnInit 
    formData: Formdata[];

    constructor(private formService: FormService)

    getData(): void 
        this.formService.getData().then(formData => this.formData = formData);
    

    ngOnInit(): void 
        this.getData();
    

    private data = this.formService.getData().then(formData => this.formData = formData);

    search_data(data)
        console.log(data);
    

如果您检查组件中的私有数据。我试图在服务中获取数据。不幸的是，没有运气。

基本上，它将是输入和选择框的值。

所以，这是我的表格

<form>
  <label class="input-group">
    <p>View By</p>
    <select [(ngModel)]="data.viewBy" name="viewBy">
      <option>Daniela Oraa</option>
      <option>Lovely Laparan</option>
      <option>Justin Bibo</option>
    </select>
  </label>
  <label class="input-group">
    <p>Company Unit</p>
    <select [(ngModel)]="data.companyUnit" name="companyUnit">
      <option>Nusa</option>
      <option>Bumi</option>
    </select>
  </label>
  <label class="input-group">
    <p>Financial Year</p>
    <select [(ngModel)]="data.financialYear" name="financialYear">
      <option>2016</option>
      <option>2004</option>
      <option>1945</option>
      <option>1897</option>
    </select>
  </label>
  <label class="input-group">
    <p>Clients</p>
    <select [(ngModel)]="data.clients" name="clients">
      <option>Dummy Text 1</option>
      <option>Dummy Text 2</option>
      <option>Dummy Text 3</option>
    </select>
  </label>
  <label class="input-group">
    <p>Date From</p>
    <input type="date" [(ngModel)]="data.dateFrom" name="dateFrom"/>
  </label>
  <label class="input-group">
    <p>Date To</p>
    <input type="date" [(ngModel)]="data.dateTo" name="dateTo"/>
  </label>
  <button type="button" (click)="search_data(data)">Search</button>
</form>

我认为在 ngModel 数据对象中赋值的逻辑是：

private data = 
  viewBy: 'Daniela Oraa',
  ...

我也试过这个，尽管我知道它不会起作用。

private data = formData;

第二种方法是在元素内部注入值。

<form *ngFor="let fdata of formData">
    <select [(ngModel)]="data.viewBy" name="viewBy" [ngValue]="fdata.viewBy"> 
    // this method fail but I can get fdata.viewBy value

    ...

我尝试了所有我能想到的。而且它们都不起作用。所以，我决定在这里问它。

任何帮助对我来说都意义重大。谢谢。

【参考方案1】：

代码里面的解释。

在您的组件中：

import  Component, OnInit  from '@angular/core';

import  Formdata  from '../formdata';
import  FormService  from '../form.service';

@Component(
  templateUrl: 'app/html-templates/clientdata_balance.html',
  styleUrls: ['css/templates.css'],
  providers: [ FormService ]
)

export class BalanceComponent implements OnInit 
    formData: Formdata[];
    private data = ; // prevents error property undefined

    constructor(private formService: FormService)

    // no need to reference a function (getData) because you will use it right away

    ngOnInit(): void 
        this.formService.getData().then(value => 
            // getData() from form.service.ts

            for(let i in value[0]) this.data[i] = value[0][i];
            /* Basically, this for ... in loop do the magic.
               Looping over the object

               It will be this.data[key] = value
               -- or -- for example

               this.data['viewBy'] = 'Sample 1';
               this.data['companyUnit'] = 'BIR';
               ...

            */
        )
    

    search_data(data)
        console.log(data);
    

希望它对你有用。干杯！

【参考方案2】：

用这条线

private data = this.formService.getData().then(formData => this.formData = formData);

数据（来自您的服务的FORM_DATA）分配给this.formData。

this.data 只获得对承诺的引用。

【讨论】：

这似乎是一个提问的好地方，而不是提出新问题。我正在做与 OP 相同的事情，我很惊讶您应该创建自己的模型 FormData（根据官方文档和他们的 Hero 示例），但它最终是用任何内容覆盖私有字段（FormData 类型）来自服务器的响应不是映射它。他们甚至没有将映射显示为一个选项。所以问题是，我们真的应该用服务器响应覆盖本地 FormData 还是应该手动实现映射？

“映射”是什么意思？

formData:FormData 中的类型仅用于静态分析和自动补全。运行时没有类型检查。这仍然是 JS 领域，你必须自己处理这些事情。这就是我使用 Dart 的原因 ;-) Dart 最终也可以转换为 JS，但它有一个开发模式，其中类型信息被编译到 JS 中，并且在运行时也会检查类型。出于性能原因，仅删除了部署类型信息。

@Günter 当然，它是 js 土地解释了它为什么起作用，这只是一个好习惯的问题 :) 感觉就像他们通过这样的例子引入了坏习惯，你应该首先定义一个强大的输入然后忽略它。或者也许只是我是同一个人，在 C# 中的服务器响应中创建了相同的类型 :) 无论如何，感谢您的考虑。真的很感激！

@user111111 您在点击时看到对象的事实只是由于您的点击需要比 Promise 更多的时间来解决的情况。这正是 Promises 的目的：让您能够在异步函数解析之前继续处理事情（例如 consol.log）。