Question

在我的案例中，从不同组件的列表中获取数据的正确或最佳方式是什么。

我使用MVC C# + Angular2模板Vs2017。

我已经构建了一个模式对话框，可以将文档导入某个部门。我已从数据库中获取TypeList并将项添加到其表中。当我到达addToMyDepartament()时，docTypeList已完成，但DocList空了。编码不是100％完成（删除一些行使其更短）但你可以知道这里的目的是什么。

Doc.component.html

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"  data-backdrop="static" data-keyboard="false" id="documets">
  <div class="modal-dialog modal-md">

   <div class="col-md-7">
     <select class="form-control" [(ngModel)]="pDocType" name="pDocType">                                    
       <option *ngFor="let Doc of vDocTypeList" value={{Doc .DocTypeName}}>
         {{TpDocs.DocTypeName}}
       </option>
     </select>
   </div>
   <div class="col-md-4">
     <input class="form-control"  [(ngModel)]="pDocNumber" name="pDocNumber" type="text">
     </div>
     <div class="col-md-1">
       <button class="btn btn-sm btn-success" (click)="AddToDocList()"><i class="fa fa-plus"></i> </button>
       </div>
      </div>
    <table class="col-md-2 table table-striped table-bordered table-hover padd">
    <thead>                                
      <tr>
        <th >Type</th>
        <th >Number</th> 
      </tr>
    </thead>
    <tbody>
      <tr  *ngFor='let doc of vDocList' >
        <td>{{doc.vType}}</td>
        <td>{{doc.vNumber}}</td> 
      </tr>                                
    </tbody>
    </table>
  </div>
</div>

Doc.component.ts

import { Component } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
var JQuery = require('jquery');


@Component({
  selector: 'app-cad-doc',
  templateUrl: './cad.doc.component.html'


 })


export class CadDocumento {      
  public pListaDocs: Array<string>;
  public pDocNumber: string;
  public pDocType: string;


  public vDocList = [
    {
        vType: "",
        vNumber: ""

    }
  ];


  private vDocTypeList = [

    {
        vDocTypeId: "",
        vDocTypeName: ""
    }
  ]

  constructor(private http: Http) {

    this.GetDocType();       


  }


  GetDocType() {

    this.http.get('/Home/GetDocType')
        .subscribe(data => {
            var ObjTpDoc = JSON.parse(data.json());
            for (var i in ObjDoc) {
                if (ObjDoc[i] != null) {
                    this.vDocTypeList.push(ObjDoc[i]);
                }
            }                

        });

  }


  AddToDocList() {
    this.vDocList.push({
        vType: this.pDocType,
        vNumber: this.pDocNumber

    }) 


  }

  RemoveFromDocList(pIndex: number) {
    this.vDocList.splice(pIndex, 1);
  }

  OpenDocs(pTitle: string, pFaAny: string) {

    this.TitleDocs = pTitle;
    this.faAny = pFaAny;
    JQuery('#document').modal('show');

  }
}

department.component.html

<label class="col-md-2 control-label">Docs:</label>                            
<div class="col-lg-2">                               
  <button class="btn btn-lg btn-default fa fa-book  btn-block" (click)="openDocs()"></button>                            
</div>
<div class="col-lg-2  pull-right">
  <button type="button" class="btn btn-md btn-success btn-block" (click)="AddToMyDepartament()">OK</button>
</div>

department.comonent.ts

import { Component, Input } from '@angular/core';
import { routerTransition } from '../router.animations';
import { Http, Response, Headers, RequestOptions } from '@angular/http';    
import { Doc } from '../shared/doc.component';

@Component({
  selector: 'app-departament',
  templateUrl: './departament.component.html',
  animations: [routerTransition('slideToRight')],
  host: { '[@routerTransition]': '' },
  providers: [Doc]
})

export class Departament {

  @Input() pDepartment;            

constructor(private http: Http, private doc: Doc) {}

openDocs() {
    this.doc.OpenDocs(this.pDepartament, "fa-book");
}    

AddToMyDepartament() {

    var pObjDepartament = {           
        vDocument: this.doc.vDocList

    };

    this.http
        .post(window.location.href + '/PostDepartament', pObjDepartament)
        .subscribe(data => {
        var ObjDepartament = JSON.parse(data.json());
        alert(ObjDepartament);            
     });        
  }
}

Answer 1

利用Angular Services，它们是在组件之间传递数据的一种方式，也很简单，因为输入和输出会卡在事件发射器的Spaghetti中，您也可以查看ngrx存储在一个地方保存数据。但我建议你只在中型到大型的应用程序中使用ngrx，因为它会增加一些代码。

我的回购在详细信息https://github.com/rahulrsingh09/AngularConcepts

中使用了这两个概念

角度2提供者的空数组

1 个答案: