为什么我得到' TypeError:无法读取属性' slice'未定义的'?

时间:2018-06-05 20:12:53

标签: asp.net typescript model-view-controller angular5

我正在开展一个小项目。它是一个ASP.NET MVC / Angular5项目。我只是尝试使用从Modal或PrimeNG对话框中选择的数据填充tableView(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>

每次点击“保存”按钮对话框上的按钮,在我得到的控制台中:

CHROME CONSOLE LOG

我现在已经盯着这3天了,不知道为什么这不起作用。请帮忙!

1 个答案:

答案 0 :(得分:0)

对此的决议是@ConnorsFan的建议。 indexes未初始化。设置indexes: Index[] = []修复了问题。谢谢@ConnorsFan。