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变化检测不当,但没有一步一步的例子准确地解释为什么每个步骤完成,我已经看到了。
任何帮助,将不胜感激。
感谢, 比尔
有可能是其他的东西,但在第一开关使用箭头起着保持this
变化的范围
reader.onload = function(e) {
到
reader.onload = (e) => {
所以,我想出了一个关于我的问题。 我需要的是从中获取数据的简单服务。数据更改时,视图将更新。
这里是什么,我做了一个总结:
我添加了一个简单的服务(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);
从我看过的内容来看,这显然是谷歌希望你做的,而不是我所做的。
希望这可以帮助别人解决类似的问题。
好的,我会试试看。谢谢。 – Bill
另请参阅https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions。 (当我编写答案时,我在电话中,因此省略了链接) –