Question

我正在更新组件中数组的数据，并尝试计算Dom元素的宽度。但是dom元素宽度设置不正确，因为dom在方法完成之前没有得到更新。我在plunker中创建了一个项目。任何人都可以查看该项目并帮助我解决这个问题。

链接到plunker

https://plnkr.co/edit/2uIpzdnprwtFoab3YA8s?p=preview

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

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './../app.view.html'
})
export class AppComponent {

  @Input() topicPeopleTextBoxWidth : number;

  peopleNoOfRows : number = 1;

  @ViewChild('topicPeopleSelcted') topicPeopleSelectedView: ElementRef;

  @Input() topicPeoples : Array<Object> = new Array<Object>();

  //In the method i should create a span of the input that entered in the textbox 
  //and set the size of the text Box according to the size of the span.

  //The problem currently happening is once the Array gets updated it not updated the span 
  // and one i try to get the width of the span its not returning correctly.

  setPeopleWidth(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);
    }
  }
}

<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"
                       style="border:none;" (keyup)="setPeopleWidth($event,topicPeopleHash.value);" #topicPeopleHash value="{{topicPeople}}"
                       spellcheck="false" autocomplete="false" autocapitalize="off" autocorrect="off" tabindex="1" dir="ltr" aria-autocomplete="list"></textarea>
        </div>
      </div>

此致 M.Amarnath

Answer 1

作为快速修复，我建议将您的计算代码包装成：

setTimeout(() => { // YOUR CODE HERE });

它将使您的代码在应用DOM更改后执行。我已经在你的plunker中尝试了它并且它有效。

angular 4阵列推送数据不会立即在视图上更新

1 个答案: