アンケート2のプロバイダーからの空の配列

Question

私のケースでは、別のコンポーネントからのリストからデータを取得するための適切な方法があります。

私はMVCC# + 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を利用すると、コンポーネント間でデータをやりとりすることができます。また、入力と出力として簡単にイベントエミッタのスパゲッティに詰め込まれます。また、データを1か所に保持するngrxストアも見ることができます。しかし、大規模な中規模から大規模のアプリケーションの場合にのみngrxを使用することをお勧めします。私は通常、コンポーネント間のデータを処理するためにサービスを使用して詳細https://github.com/rahulrsingh09/AngularConcepts