typescript Angular html不更新，找不到$scope绑定

0lvr5msh 于 2023-03-19 发布在 TypeScript

关注(0)|答案(2)|浏览(108)

我尝试使用$scope.$apply（）;在某些函数中，不会自动更新html（Exactly this but not with timeout）。
但是当我在函数末尾使用它时，得到的是Cannot find name '$scope'，所以我假设$scope是我的模型的绑定（Because of this answer），但是当我用$scope替换绑定时，得到的是Property '$apply' does not exist on type 'string'（绑定的变量是一个字符串）。
那么我该怎么做来更新html（主要问题）或者修复$scope.$apply（）解决方案呢？
编辑：$scope和$apply（）来自AngularJS，而不是Angular 2+。我在控制台中获得了正确的输出消息，但UI没有更新，我不明白问题所在。

<div class="col-sm home_title">
    <div class="home_title_box" id="home_title_box"></div>
    <h2 class="home_item">{{current_title}}</h2>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent {

  constructor() { }

  titles_array:   string[] = ["Doctor", "Medic", "Player"];
  current_title:  string = "None";
  curr_title_i:   number = 0;

  update_title(el: any){
    const resize_ob = new ResizeObserver((entries) => {
      if(entries !== null){
        if(entries[0].contentRect.width === 0){
          for(this.curr_title_i; this.curr_title_i < this.titles_array.length;){
            this.current_title = this.titles_array[this.curr_title_i];

            console.log(this.curr_title_i); // correct output
            console.log(this.current_title); // correct output

            this.curr_title_i++;
            if(this.curr_title_i >= this.titles_array.length){
              this.curr_title_i = 0;
            }
            break;
          }
        }
      }
    });

    resize_ob.observe(el);
  }

  ngOnInit(){
    const elemTitleBox = document.querySelector("#home_title_box");
    if(elemTitleBox !== null){
      this.update_title(elemTitleBox);
    }
  }
}

typescript

来源：https://stackoverflow.com/questions/75748843/angular-html-doesnt-update-and-cant-find-scope-binding

2条答案

按热度按时间

jslywgbw1#

您是否尝试过手动检测更改？
将以下代码添加到构造函数中：
constructor(private cdRef: ChangeDetectorRef) { }
并且在使用update_title方法之后，火灾探测发生了变化。

if (elemTitleBox !== null) {
  this.update_title(elemTitleBox);
}

this.cdRef.detectChanges();

赞(0）回复(0）举报 2023-03-19

jvlzgdj92#

https://dev.to/christiankohler/how-to-use-resizeobserver-with-angular-9l5
如果你遵循这个例子，你可能已经尝试过将宽度直接绑定到class属性，不幸的是模板不会重新呈现并保持初始值。
原因是Angular已经修补了大多数事件，但还没有修补ResizeObserver，这意味着这个回调函数在区域之外运行。
我们可以通过在区域中手动运行它来轻松地解决这个问题。

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent {

  constructor(private zone: NgZone) { }

  titles_array:  string[] = ["Doctor", "Medic", "Player"];
  current_title: string = "Nothing";
  curr_title_i:  number = 0;
  second_after:  boolean = true;
  el:            any = undefined;
  resize_ob:     any = undefined;

  update_title(): void{
    if(this.el !== null){
      this.resize_ob = new ResizeObserver((entries) => {
        this.zone.run(() => {
          if(entries !== null){
            if(this.el.parentElement !== null){
              const parentElemWidth = +getComputedStyle(this.el.parentElement).width.slice(0, -2);
              const elemWidth = +getComputedStyle(this.el).width.slice(0, -2);

              if(Math.round((elemWidth / parentElemWidth) * 100) >= 93){
                if(this.second_after){
                  this.current_title = this.titles_array[this.curr_title_i];
                  this.curr_title_i++;
                  if(this.curr_title_i >= this.titles_array.length){
                    this.curr_title_i = 0;
                  }
                  this.second_after = false;
                  setTimeout(() => this.second_after = true, 1000);
                }
              }
            }
          }
        })
      });

      this.resize_ob.observe(this.el);
    }
  }

  ngOnInit(){
    this.el = document.querySelector("#home_title_box");
    this.update_title();
  }

  ngOnDestroy() {
    this.resize_ob.unobserve(this.el);
  }
}

赞(0）回复(0）举报 2023-03-19

我来回答

typescript Angular html不更新，找不到$scope绑定

2条答案

相关问题

热门标签

最新问答