Angular 2（RC 1）：從文件加載數據時數據視圖不刷新

我一直在試圖在我的視圖中顯示從文件上傳的數據。根據我在Angular文檔和在線閱讀的內容，使用更改檢測應該是我在更新數據時完成頁面刷新的一部分，並且這種更改未反映在我的視圖中。Angular 2（RC 1）：從文件加載數據時數據視圖不刷新

我使用的是接口translations.ts來定義我的數據：

export interface ITranslation { 
    siteName: string; 
    pageName: string; 
    languageCode: string;  
    englishCaption: string; 
    translatedCaption: string; 
    arrayIndex?: number; 
}

我使用這種類型的腳本代碼執行導入和HTML模板來顯示它：

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; 
 
import { ROUTER_DIRECTIVES, CanDeactivate, ComponentInstruction, Router } from '@angular/router-deprecated'; 
 

 
import { ITranslation } from './translation'; 
 

 
declare var Papa: any; 
 

 
@Component({ 
 
    templateUrl: 'app/translator-page-data-import.component.html', 
 
    styleUrls: ['app/translator-page-data-import.component.css', 
 
       'app/assets/css/ngmes.css', 
 
       'app/assets/css/toastr.min.css', 
 
       'app/assets/css/ui-grid.min.css', 
 
       'app/assets/css/ui-grid-override.css'], 
 
    directives: [ROUTER_DIRECTIVES], 
 
    selector:'table', 
 
    changeDetection: ChangeDetectionStrategy.Default 
 
}) 
 
export class TranslatorPageDataImportComponent implements OnInit { 
 
    pageTitle: string = 'Page Data Import'; 
 
    
 
    hasData: boolean = false; 
 
    
 
    translations: ITranslation[] = [{ 
 
      "siteName": "none", 
 
      "pageName": "none", 
 
      "languageCode": "none",  
 
      "englishCaption": "none", 
 
      "translatedCaption": "none" 
 
     }]; 
 
    
 
    constructor(private router: Router) { 
 
    } 
 
    
 
    onChanges(changes){ 
 
     console.log("onChanges was fired"); 
 
    } 
 
    
 
    ngOnInit(): void { 
 
     console.log('PAGE "' + this.pageTitle + '" WAS LOADED!!!'); 
 
    } 
 
    
 
    importFile(evt) { 
 
\t \t let fileInput = evt.target; 
 

 
     let file = fileInput.files[0]; 
 
     let textType = /text.*/; 
 

 
     if (file.type.match(textType)) { 
 
      let reader = new FileReader(); 
 

 
      reader.onload = function(e) { 
 
       let incomingCsvData: string = reader.result; 
 
       // turn on if you need to inspect the raw CSV data 
 
       // console.log("Incoming CSV Data" + incomingCsvData); 
 

 
       let newJsonData: any = Papa.parse(incomingCsvData, {header: true}); 
 
       // turn on if you need to see the converted CSV data 
 
       //console.log("Incoming CSV Data converted to JSON: "); 
 
       //console.log(JSON.stringify(newJsonData)); 
 
       
 
       if (newJsonData.errors.length == 0) { 
 
        this.translations = newJsonData.data; 
 
        console.log("Translations data was populated from file: ") 
 
        console.log(JSON.stringify(this.translations)); 
 
             
 
        for (var i = 0; i < this.translations.length; i++) { 
 
         this.translations.arrayIndex = i; 
 
        } 
 

 
        this.translations.push({ 
 
         "siteName": "none", 
 
         "pageName": "none", 
 
         "languageCode": "none",  
 
         "englishCaption": "none", 
 
         "translatedCaption": "none" 
 
        }); 
 

 
        this.hasData = true; 
 
        console.log("hasData is " + this.hasData); 
 
       } 
 
       else { 
 
        for (var i = 0; i < newJsonData.errors.length; i++) { 
 
         console.log("There were errors Importing the data."); 
 
         console.log("Error Type: " + newJsonData[i].errors.type); 
 
         console.log("Error Code: " + newJsonData[i].errors.code); 
 
         console.log("Error Message: " + newJsonData[i].errors.message); 
 
         console.log("Error Row: " + newJsonData[i].errors.row); 
 
        } 
 
       } 
 

 
      } 
 

 
      reader.readAsText(file); \t 
 
     } else { 
 
      console.log("File not supported!"); 
 
     } 
 
    }  
 
}

<div class='container-fluid'> 
 
    <div class="page-title"> 
 
     <h3>{{pageTitle}}</h3> 
 
    </div> 
 
      
 
    <div class='page-body'> 
 
     <div class='row'> 
 
      <div class="form-group required"> 
 
       <div class='col-md-3'> 
 
        <input type="file" id="fileInput" (change)='importFile($event)'> 
 
       </div>     
 
       <div class='col-md-3'> 
 

 
       </div>     
 
       <div class='col-md-3'> 
 

 
       </div> 
 
       <div class='col-md-3'> 
 
       
 
       </div>         
 
      </div>     
 
     </div> 
 
     <div class='row'> 
 
      <div class='col-xs-12' id="newTranslationsRow"> 
 
       <div [ngSwitch]="hasData"> 
 
        <div *ngSwitchWhen="true"> 
 
         <h1>Data was imported</h1> 
 
        </div> 
 
        <div *ngSwitchWhen="false"> 
 
         <h1>No data was imported</h1> 
 
        </div>  
 
        <div *ngSwitchDefault> 
 
         <h1>No data was imported</h1> 
 
        </div>         
 
       </div> 
 
       <div class='table-responsive' id="translationsTable" *ngIf='translations && translations.length'> 
 
        <table class='table'> 
 
         <thead> 
 
          <tr> 
 
           <th>Application Name</th> 
 
           <th>Page Name</th> 
 
           <th>Language-Country Code</th> 
 
           <th>English Caption</th> 
 
           <th>Translated Caption</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
          <tr *ngFor='let translation of translations'> 
 
           <td>{{ translation.siteName }}</td> 
 
           <td>{{ translation.pageName }}</td> 
 
           <td>{{ translation.languageCode }}</td> 
 
           <td>{{ translation.englishCaption }}</td> 
 
           <td>{{ translation.translatedCaption }}</td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

這是我的控制檯日誌輸出表示底層JSON數據陣列中的數據： Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. translator-page-data-import.component.ts:43 PAGE "Page Data Import" WAS LOADED!!! translator-page-data-import.component.ts:95 Translations data was populated from file: translator-page-data-import.component.ts:96 [{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Active","translatedCaption":"Active","arrayIndex":"0"},{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Add","translatedCaption":"Add","arrayIndex":"1"},{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Cancel","translatedCaption":"Cancel","arrayIndex":"2"},{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Delete","translatedCaption":"Delete","arrayIndex":"3"},{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Load","translatedCaption":"Load","arrayIndex":"4"},{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Okay","translatedCaption":"Okay","arrayIndex":"5"},{"siteName":"ct","pageName":"setup","languageCode":"en-US","englishCaption":"Save","translatedCaption":"Save","arrayIndex":"6"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Active","translatedCaption":"Activo","arrayIndex":"7"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Add","translatedCaption":"A?adir","arrayIndex":"8"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Cancel","translatedCaption":"Cancelar","arrayIndex":"9"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Delete","translatedCaption":"Borrar","arrayIndex":"10"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Load","translatedCaption":"Carga","arrayIndex":"11"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Okay","translatedCaption":"Bueno","arrayIndex":"12"},{"siteName":"ct","pageName":"setup","languageCode":"es-MX","englishCaption":"Save","translatedCaption":"Salvar","arrayIndex":"13"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Active","translatedCaption":"Aktiv","arrayIndex":"14"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Add","translatedCaption":"Hinzuf?gen","arrayIndex":"15"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Cancel","translatedCaption":"Stornieren","arrayIndex":"16"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Delete","translatedCaption":"L?schen","arrayIndex":"17"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Load","translatedCaption":"Belastung","arrayIndex":"18"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Okay","translatedCaption":"Okay","arrayIndex":"19"},{"siteName":"ct","pageName":"setup","languageCode":"de-DE","englishCaption":"Save","translatedCaption":"sparen","arrayIndex":"20"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Active","translatedCaption":"Active","arrayIndex":"21"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Add","translatedCaption":"Add","arrayIndex":"22"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Cancel","translatedCaption":"Cancel","arrayIndex":"23"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Delete","translatedCaption":"Delete","arrayIndex":"24"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Load","translatedCaption":"Load","arrayIndex":"25"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Okay","translatedCaption":"Okay","arrayIndex":"26"},{"siteName":"ct","pageName":"AppCommon","languageCode":"en-US","englishCaption":"Save","translatedCaption":"Save","arrayIndex":"27"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Active","translatedCaption":"Activo","arrayIndex":"28"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Add","translatedCaption":"A?adir","arrayIndex":"29"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Cancel","translatedCaption":"Cancelar","arrayIndex":"30"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Delete","translatedCaption":"Borrar","arrayIndex":"31"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Load","translatedCaption":"Carga","arrayIndex":"32"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Okay","translatedCaption":"Bueno","arrayIndex":"33"},{"siteName":"ct","pageName":"AppCommon","languageCode":"es-MX","englishCaption":"Save","translatedCaption":"Salvar","arrayIndex":"34"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Active","translatedCaption":"Aktiv","arrayIndex":"35"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Add","translatedCaption":"Hinzuf?gen","arrayIndex":"36"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Cancel","translatedCaption":"Stornieren","arrayIndex":"37"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Delete","translatedCaption":"L?schen","arrayIndex":"38"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Load","translatedCaption":"Belastung","arrayIndex":"39"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Okay","translatedCaption":"Okay","arrayIndex":"40"},{"siteName":"ct","pageName":"AppCommon","languageCode":"de-DE","englishCaption":"Save","translatedCaption":"sparen","arrayIndex":"41"}] translator-page-data-import.component.ts:111 hasData is true

我已經嘗試了很多變化這個主題（即使用各種更改檢測方法，使用自定義HTML標記，使用Angular 2 ngSwitches ngIfs等），但沒有運氣。我也試着直接訪問HTML元素來操作它以便顯示（即blur（）和focus（）等），但沒有運氣。

這可能是我正在做角度2變化檢測不當，但沒有一步一步的例子準確地解釋爲什麼每個步驟完成，我已經看到了。

任何幫助，將不勝感激。

感謝，比爾

來源

2016-05-31 Bill

有可能是其他的東西，但在第一開關使用箭頭起着保持this

變化的範圍

reader.onload = function(e) {

到

reader.onload = (e) => {

來源

2016-06-01 03:08:51

好的，我會試試看。謝謝。 – Bill

另請參閱https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions。（當我編寫答案時，我在電話中，因此省略了鏈接） –

所以，我想出了一個關於我的問題。我需要的是從中獲取數據的簡單服務。數據更改時，視圖將更新。

這裏是什麼，我做了一個總結：

我添加了一個簡單的服務（TranslatorDataImportService）是這樣的：

import { Injectable } from '@angular/core'; 
import { ITranslation } from './translation'; 

@Injectable() 
export class TranslatorDataImportService { 

    // the default state before translations are imported  
    noTranslations: ITranslation[] = [{ 
     "appName": "none", 
     "pageName": "none", 
     "cultureInfo": "none",  
     "target": "none", 
     "value": "none" 
    }]; 
    importedTranslations: ITranslation[]; 

    getImportedTranslatorData(newTranslations?: ITranslation[]) { 
     if (newTranslations) { 
     this.importedTranslations = newTranslations; 
     } 
     else { 
     this.importedTranslations = this.noTranslations; 
     } 

     return Promise.resolve(this.importedTranslations); 
    } 

}

然後我修改了我的原始類型的腳本文件，像這樣：

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; 
import { ROUTER_DIRECTIVES, CanDeactivate, ComponentInstruction, Router } from '@angular/router-deprecated'; 

import { ITranslation } from './translation'; 
import { TranslatorDataImportService } from './translator-data-import.service'; 
import { TranslatorService } from './translator.service'; 

declare var Papa: any; 

@Component({ 
    templateUrl: 'app/translator-page-data-import.component.html', 
    styleUrls: ['app/translator-page-data-import.component.css', 
       'app/assets/css/ngmes.css', 
       'app/assets/css/toastr.min.css', 
       'app/assets/css/ui-grid.min.css', 
       'app/assets/css/ui-grid-override.css'], 
    directives: [ROUTER_DIRECTIVES], 
    selector:'table', 
    changeDetection: ChangeDetectionStrategy.Default 
}) 
export class TranslatorPageDataImportComponent implements OnInit { 
    pageTitle: string = 'Import Application Data'; 
    hasData: boolean = false; 
    errorMessage: string; 
    importErrorMessage: string; 

    translations: ITranslation[]; 

    constructor(private _translatorService: TranslatorService, 
       private _translatorDataImportService: TranslatorDataImportService, 
       private router: Router) { 
    } 

    getTranslations(importedTranslations?: ITranslation[]): void { 
     this._translatorDataImportService.getImportedTranslatorData(importedTranslations).then(translations => this.translations = translations); 
    } 

    ngOnInit(): void { 
     console.log('PAGE "' + this.pageTitle + '" WAS LOADED!!!'); 

     this.getTranslations(); 
    } 

    saveTranslations(applicationName: string, importedData: ITranslation[]): void { 
     this._translatorService.saveTranslations(applicationName, importedData) 
      .subscribe(
       error => this.errorMessage = <any>error); 
     if (this.errorMessage) { 
      console.log("An error occured saving the data: " + this.errorMessage); 
     } 
     console.log("Save call complete");   
    } 

    onChanges(changes){ 
     console.log("onChanges was fired"); 
    } 

    importFile(evt) { 
     this.hasData = true; 
     console.log("hasData is " + this.hasData); 

     let fileInput = evt.target; 

     let file = fileInput.files[0]; 
     let textType = /text.*/; 

     if (file.type.match(textType)) { 
      let reader = new FileReader(); 

      reader.onload = (e) => { 
       let incomingCsvData: string = reader.result; 
       // turn on if you need to inspect the raw CSV data 
       // console.log("Incoming CSV Data" + incomingCsvData); 

       let newJsonData: any = Papa.parse(incomingCsvData, {header: true}); 
       // turn on if you need to see the converted CSV data 
       // console.log("Incoming CSV Data converted to JSON: "); 
       // console.log(JSON.stringify(newJsonData)); 

       if (newJsonData.errors.length == 0) { 
        let importedTranslations: ITranslation[] = newJsonData.data; 
        let applicationName: string; 
        let passedTranslations: ITranslation[]= []; 
        let ignoredTranslations: ITranslation[]= []; 
        let index: number = 0; 

        console.log("Translations data was populated from file: ") 
        console.log(JSON.stringify(importedTranslations)); 
        if (importedTranslations.length > 0) { 
         applicationName = importedTranslations[0].appName; 
         console.log("Application Name = " + applicationName); 
        }      
        for (var i = 0; i < importedTranslations.length; i++) { 
         importedTranslations[i].arrayIndex = i; 
        } 

        this.getTranslations(importedTranslations); 
        // this.saveTranslations(applicationName,importedTranslations); 

       } 
       else { 
        for (var i = 0; i < newJsonData.errors.length; i++) { 
         console.log("There were errors Importing the data."); 
         console.log("Error Type: " + newJsonData[i].errors.type); 
         console.log("Error Code: " + newJsonData[i].errors.code); 
         console.log("Error Message: " + newJsonData[i].errors.message); 
         console.log("Error Row: " + newJsonData[i].errors.row); 
        } 
       } 

      } 

      reader.readAsText(file);  
     } else { 
      console.log("File not supported!"); 
     } 
    }  
}

即使我將數據傳遞到「獲取數據的服務，即

this.getTranslations(importedTranslations);

從我看過的內容來看，這顯然是谷歌希望你做的，而不是我所做的。

希望這可以幫助別人解決類似的問題。

來源

2016-06-08 20:08:26 Bill

Angular 2（RC 1）：從文件加載數據時數據視圖不刷新

回答

相關問題