我一直试图在我的 View 中显示从文件上传的数据。根据我在 Angular 文档和在线阅读的内容，当我的数据更新并且该更改未反射(reflect)在我的 View 中时，我应该如何使用更改检测来完成刷新页面的一部分。
我正在使用一个接口(interface)在 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) {
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);
} 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 元素来操作它以使其显示(即模糊()和焦点()等)，但没有运气。
有可能我在做 Angular 2 Change Detection 时不正确，但是没有一步一步的例子来解释我所看到的每一步是如何以及为什么完成的。
任何帮助，将不胜感激。
谢谢，
账单
最佳答案
可能还有其他事情，但首先切换到使用箭头函数来保留 this 的范围
改变
reader.onload = function(e) {
到
reader.onload = (e) => {
关于 Angular 2 (RC 1) : Data view not refreshing when data loaded from a file，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37555127/