更新组件内的模型值不会反映在ngFor内部

Question

我正在尝试使用jqxTabs动态创建一个新选项卡，我试图在将新对象添加到数组时更新模型，更新不会更新视图。

查看：在下面的视图中，我附加了事件处理程序addTab。在该方法中，我正在更新模型，但它没有在其他ngFor中更新。

<jqxTabs #tabsReference [width]='"90%"' [height]='200' [position]='"top"'
     [animationType]='"none"' [selectionTracker]='false'>

    <ul>
     <li style="margin-left: 30px;" *ngFor="let item of data;" (click)="addTab(item)">
      <span>{{item.name}}</span>
     </li>
 </ul>

 <div *ngFor="let item1 of data">{{item1.desc}}</div>

</jqxTabs>

组件：

import { Component, ViewChild, AfterViewInit, Input, Output, NgZone } from '@angular/core';
import { jqxTabsComponent } from '../../bower_components/jqwidgets/jqwidgets-ts/angular_jqxtabs';
import { jqxCheckBoxComponent } from '../../bower_components/jqwidgets/jqwidgets-ts/angular_jqxcheckbox';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
data = [{
    name: "slide1",
    desc: "Node.js."
  }, {
    name: "slide2",
    desc: "JavaServer "
  }, {
    name: "slide3",
    desc: "Node.js ."
  }, {
    name: "add slide +"
  }];

  addTab(item) {
    var ss = item.name;
      if (ss == "add slide +") {
        for (var i = 0; i < this.data.length; i++) {
          if (i == this.data.length - 1) {
            this.data[i].name = "new slide";
            console.log(this.data);
          }
        }
      }
  }
  ngAfterViewInit(): void {
      ( < HTMLElement > document.getElementById('animation').firstElementChild).style.marginTop = '10px';
      ( < HTMLElement > document.getElementById('contentAnimation').firstElementChild).style.marginTop = '10px';
    }
}

不确定我做错了什么。任何人都可以帮我解决这个问题。