來自角度2提供商的空陣列

Question

在我的情況下，從不同組件的列表中獲取數據的正確或最佳方式是什麼？

我正在使用MVCC# + Angular2 Template 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