title: Why am I getting 'TypeError: Cannot read property 'slice' of undefined'?
body: <p>I am working on a small project.  It is an ASP.NET MVC/Angular5 project. I am simply trying to populate a tableView (PrimeNG) with data that is selected from a Modal or PrimeNG Dialog.</p>
  
  <p>Here is a snipit of the relevent ts file: </p>
  
  <pre><code> displayIndexDialog: boolean;
    index: Index = {};
    selectedIndex: Index;
    newIndex: boolean;
    indexes: Index[];
  //METHODS
   getIndexes() {
      this._indexesService.getIndexes().subscribe(indexes =&gt; this.indexList = indexes);
  
    }
  showIndexAdd() {
      this.newIndex = true;
      this.selectedIndex = {};
      this.displayIndexDialog = true;
      this.getIndexes();
  
    }
  closeIndexDialog() {
      this.displayIndexDialog = false;
    }
   saveIndex() {
      let index = [...this.indexes];
  
      if (this.newIndex) {
        index.push(this.index);
      }else
        index[this.indexes.indexOf(this.selectedIndex)] = this.index;
  
      this.indexes = index;
      this.indexes = null;
      this.displayIndexDialog = false;
    };
  //INTERFACE
  interface Index {
    defaultIndex?;
    pK_Index ?;
    description ?;
  }
  </code></pre>
  
  <p>Here is the relevent HTML:</p>
  
  <pre><code>&lt;!--INDEX TABLE--&gt;
  &lt;p-table [columns]="cols3" [value]="indexes"&gt;
              &lt;ng-template pTemplate="header" let-columns&gt;
                &lt;tr&gt;
                  &lt;th *ngFor="let col of columns"&gt;
                    {{col.header}}
                  &lt;/th&gt;
                &lt;/tr&gt;
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
                &lt;tr [pSelectableRow]="rowData"&gt;
                  &lt;td *ngFor="let col of columns"&gt;
                    {{rowData[col.field]}}
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/ng-template&gt;
  
              &lt;ng-template pTemplate="summary" let-rowData&gt;
                &lt;div style="text-align:left"&gt;
                  &lt;button class="btn-cblt" type="button" pButton icon="fa-plus" (click)="showIndexAdd()" label="Add"&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/ng-template&gt;
            &lt;/p-table&gt;&lt;br /&gt;
            &lt;h4&gt;Differentials&lt;/h4&gt;
            &lt;p-table [columns]="cols2" [value]="diffs1"&gt;
              &lt;ng-template pTemplate="header" let-columns&gt;
                &lt;tr&gt;
                  &lt;th *ngFor="let col of columns"&gt;
                    {{col.header}}
                  &lt;/th&gt;
                &lt;/tr&gt;
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
                &lt;tr [pSelectableRow]="rowData"&gt;
                  &lt;td *ngFor="let col of columns"&gt;
                    {{rowData[col.field]}}
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate="summary" let-rowData&gt;
                &lt;div style="text-align:left"&gt;
                  &lt;button class="btn-cblt" type="button" pButton icon="fa-plus" (click)="showDifferentialAdd()" label="Add"&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/ng-template&gt;
            &lt;/p-table&gt;
  
  &lt;!--ADD INDEX DIALOG--&gt;
  &lt;p-dialog class="sha" header="Add Index" [(visible)]="displayIndexDialog" [responsive]="true" showEffect="fade" [modal]="true" [width]="600" [height]="300"&gt;
    &lt;div class="ui-g ui-fluid" *ngIf="selectedIndex"&gt;
      &lt;div class="ui-g-12"&gt;
        &lt;div class="ui-g-4"&gt;
          &lt;label for="Index"&gt;Index&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-8"&gt;
          &lt;p-dropdown id="index" placeholder="Select an Index" [options]="indexList" [(ngModel)]="selectedIndex.description" [ngModelOptions]="{standalone: true}" optionLabel="description" [showClear]="true"&gt; &lt;/p-dropdown&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-g-12"&gt;
        &lt;div class="ui-g-4"&gt;
          &lt;label for="isDefault"&gt;Default Index?&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-8"&gt;
          &lt;p-checkbox name="defaultIndex" id="isDefault"  [(ngModel)]="selectedIndex.defaultIndex"&gt;&lt;/p-checkbox&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="indexName"&gt;{{index.pK_Index ? index.pK_Index: ' ' }}&lt;/div&gt;
    &lt;/div&gt;
  
      &lt;div class="ui-dialog-buttonpane ui-helper-clearfix"&gt;
        &lt;button class="btn-cblt" type="button" pButton icon="fa-check" (click)="saveIndex()" label="Save"&gt;&lt;/button&gt;
        &lt;button class="btn-cblt-danger" type="button" pButton icon="fa-close" (click)="closeIndexDialog()" label="Cancel"&gt;&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>Every time I click the 'save' button on the dialog, in the console I get:</p>
  
  <p>﻿<a href="https://i.stack.imgur.com/a34P9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a34P9.png" alt="CHROME CONSOLE LOG"></a></p>
  
  <p>I have been staring at this for 3 days now and Have no idea why this isn't working. Please help!</p>