Angular 2 (RC 1): Data view not refreshing when data loaded from a file
<p>I have been attempting to display data in my view that is uploaded from a file. According to what I have read in the Angular documentation and online, using change detection should be how I accomplish refreshing part of a page when my data is updated and that change is not reflected in my view. </p>

<p>I am using a interface to define my data in translations.ts: </p>

<pre><code>export interface ITranslation {
    siteName: string;
    pageName: string;
    languageCode: string;    
    englishCaption: string;
    translatedCaption: string;
    arrayIndex?: number;
}
</code></pre>

<p>I am using this type script code to perform the import and html template to display it: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 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 &lt; 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!");
        }
     }     
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container-fluid'&gt;
    &lt;div class="page-title"&gt;
        &lt;h3&gt;{{pageTitle}}&lt;/h3&gt;
    &lt;/div&gt;
         
    &lt;div class='page-body'&gt;
        &lt;div class='row'&gt;
            &lt;div class="form-group required"&gt;
                &lt;div class='col-md-3'&gt;
                    &lt;input type="file" id="fileInput" (change)='importFile($event)'&gt;
                &lt;/div&gt;                 
                &lt;div class='col-md-3'&gt;

                &lt;/div&gt;                 
                &lt;div class='col-md-3'&gt;

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

<p>Here is my console log output that shows the data in the underlying JSON data array: 
<code>
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
</code></p>

<p>I have tried many variations on this theme (i.e. using various change detection methods, using custom HTML tags, using Angular 2 ngSwitches &amp; ngIfs, etc...) with no luck.
I have also tried directly access the HTML element to manipulate it in order to get it to display (i.e. blur() and focus(), etc...) with no luck. </p>

<p>It is possible that I am doing the Angular 2 Change Detection improperly, but there is no step by step example explaining exactly how &amp; why each step is done that I have seen. </p>

<p>Any help would be appreciated. </p>

<p>Thanks, 
Bill </p>