angular 4 .. Array Push不会立即更新视图

Question

我正在使用角度4.下面是问题。

我在一个跨度和一个文本框中有一个div。每当我在文本框中输入内容并按回车键。它必须在div中动态创建一个span，并且必须更改文本框的大小以提醒大小。下面是我用角度4编写的代码。下面的代码不起作用，因为每当我做数组推送时它都不会立即反映出来。请帮帮我。

HTML CODE ::

<div>
      <div id="searchBar" class="input-form">
        <label class="label-form">people In Topic</label>
        <div id="topicPeople" #topicPeopleSelcted style="border-bottom: 1px #e6e6e6;padding:0px;">
            <span style="padding:0px;">
                <span *ngFor="let person of topicPeoples" style="background-color: #e6e6e6;font-color:black;"> {{ person.name }}</span>
            </span>
            <textarea  (keydown.enter)="$event.preventDefault()" [style.width.px]="topicPeopleTextBoxWidth+'px'" rows="1" id="topicPeopleTextBox" formControlName="topicPeople"
                       style="border:none;" (keyup)="topicPeoplechange($event,topicPeopleHash.value)" #topicPeopleHash value="{{topicPeople}}"
                       spellcheck="false" autocomplete="false" autocapitalize="off" autocorrect="off" tabindex="1" dir="ltr" aria-autocomplete="list"></textarea>
        </div>
      </div>
    </div>

输入脚本代码::

  import {
  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, SimpleChanges,
  ViewChild
} from '@angular/core';
import {FormBuilder, Validators} from "@angular/forms";

@Component({
  templateUrl: './saveTopic.component.html',
  changeDetection : ChangeDetectionStrategy.OnPush,
  styleUrls: ['./../group/saveGroup.component.css','./../group/group.component.css']
})
export class SaveTopicComponent  implements OnInit{

  saveTopicForm : any;

  @Input() topicPeopleTextBoxWidth : number;

  peopleNoOfRows : number = 1;

  @ViewChild('topicPeopleSelcted') topicPeopleSelectedView: ElementRef;

  @Input() topicPeoples :   Array<Object>;

  constructor(private formBuilder: FormBuilder,private ref : ChangeDetectorRef) {
    this.topicPeoples = new Array();
    this.saveTopicForm = this.formBuilder.group({
      'topicName': ['', Validators.required],
      'topicDescription': ['', Validators.required],
      'topicPeople' : ['']
    });

   setInterval(() => {
        console.log("Testing");
        this.ref.markForCheck();
    },500)
  }
  ngOnInit() {
      this.topicPeopleTextBoxWidth = 420;
  }

  topicPeoplechange(event,inputValue) {
    if(event.keyCode == 13) {
      this.topicPeoples.push({
        "name": inputValue
      });
      console.log(this.topicPeopleSelectedView.nativeElement.offsetWidth);
      let childrens = this.topicPeopleSelectedView.nativeElement.children;
      let peopleDiv = childrens[0];
      let textBoxDiv =childrens[1];
      let peopleSpan = peopleDiv.children;
      let totalSpanWidth = 0;
      for (var _i = 0; _i < peopleSpan.length; _i++) {
        totalSpanWidth = totalSpanWidth + peopleSpan[_i].offsetWidth;
      }
      console.log(this.topicPeopleTextBoxWidth);
      console.log(totalSpanWidth);
      if(420 - totalSpanWidth > 0) {
          this.topicPeopleTextBoxWidth = 420 - totalSpanWidth;
      }
      console.log(this.topicPeopleTextBoxWidth);

    }
  }


  deepClone(oldArray: any[]) {
    let newArray: any = [];
    oldArray.forEach((item) => {
      newArray.push(item);
    });
    return newArray;
  }

}