Почему я получаю 'TypeError: Невозможно прочитать свойство' slice 'из undefined'?

Question

Я работаю над небольшим проектом.Это проект ASP.NET MVC / Angular5.Я просто пытаюсь заполнить tableView (PrimeNG) данными, выбранными из диалога Modal или PrimeNG.

Вот фрагмент кода файла ts:

 displayIndexDialog: boolean;
  index: Index = {};
  selectedIndex: Index;
  newIndex: boolean;
  indexes: Index[];
//METHODS
 getIndexes() {
    this._indexesService.getIndexes().subscribe(indexes => 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 ?;
}

Вотсоответствующий HTML:

<!--INDEX TABLE-->
<p-table [columns]="cols3" [value]="indexes">
            <ng-template pTemplate="header" let-columns>
              <tr>
                <th *ngFor="let col of columns">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns">
              <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                  {{rowData[col.field]}}
                </td>
              </tr>
            </ng-template>

            <ng-template pTemplate="summary" let-rowData>
              <div style="text-align:left">
                <button class="btn-cblt" type="button" pButton icon="fa-plus" (click)="showIndexAdd()" label="Add"></button>
              </div>
            </ng-template>
          </p-table><br />
          <h4>Differentials</h4>
          <p-table [columns]="cols2" [value]="diffs1">
            <ng-template pTemplate="header" let-columns>
              <tr>
                <th *ngFor="let col of columns">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns">
              <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                  {{rowData[col.field]}}
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="summary" let-rowData>
              <div style="text-align:left">
                <button class="btn-cblt" type="button" pButton icon="fa-plus" (click)="showDifferentialAdd()" label="Add"></button>
              </div>
            </ng-template>
          </p-table>

<!--ADD INDEX DIALOG-->
<p-dialog class="sha" header="Add Index" [(visible)]="displayIndexDialog" [responsive]="true" showEffect="fade" [modal]="true" [width]="600" [height]="300">
  <div class="ui-g ui-fluid" *ngIf="selectedIndex">
    <div class="ui-g-12">
      <div class="ui-g-4">
        <label for="Index">Index</label>
      </div>
      <div class="ui-g-8">
        <p-dropdown id="index" placeholder="Select an Index" [options]="indexList" [(ngModel)]="selectedIndex.description" [ngModelOptions]="{standalone: true}" optionLabel="description" [showClear]="true"> </p-dropdown>
      </div>
    </div>

    <div class="ui-g-12">
      <div class="ui-g-4">
        <label for="isDefault">Default Index?</label>
      </div>
      <div class="ui-g-8">
        <p-checkbox name="defaultIndex" id="isDefault"  [(ngModel)]="selectedIndex.defaultIndex"></p-checkbox>
      </div>
    </div>
    <div id="indexName">{{index.pK_Index ? index.pK_Index: ' ' }}</div>
  </div>

    <div class="ui-dialog-buttonpane ui-helper-clearfix">
      <button class="btn-cblt" type="button" pButton icon="fa-check" (click)="saveIndex()" label="Save"></button>
      <button class="btn-cblt-danger" type="button" pButton icon="fa-close" (click)="closeIndexDialog()" label="Cancel"></button>
    </div>

</p-dialog>

Каждый раз, когда я нажимаю кнопку «Сохранить» в диалоговом окне, в консоли я получаю:

Я смотрю на это уже 3 дня и не знаю, почему это не работает.Пожалуйста, помогите!

Answer 1

Разрешение на это было предложением @ConnorsFan.indexes не были инициализированы.Установка indexes: Index[] = [] исправила проблему.Спасибо @ ConnorsFan.