typescript 使用属性绑定时刷新Angular Emojis

fslejnso  于 2023-05-23  发布在  TypeScript
关注(0)|答案(2)|浏览(105)

我是编程新手,如果这个问题很愚蠢,我很抱歉。我使用Angular Emojis,我使用属性绑定显示特定的emoji和变量。
模板:

<angular-emojis [name]="emojivar" size="30" (mouseenter)="changeRoutine()" > </angular-emojis>

TypeScript代码:

emojivar = 'taco';

  changeRoutine(){
    console.log(this.emojivar);
    this.emojivar = 'tomato';
    console.log(this.emojivar);
  }

变量变了,但表情符号不变。有没有办法修复它,让它焕然一新?

62o28rlo

62o28rlo1#

老实说,我看不出有什么理由这行不通。您可以尝试强制更改检测:

consturctor(private cdr: ChangeDetectorRef) {}

changeRoutine(){
    console.log(this.emojivar);
    this.emojivar = 'tomato';
    console.log(this.emojivar);
    this.cdr.detectChanges();
}

[编辑]我看了一下你正在使用的库......它根本不处理更改:
https://github.com/saqy/angular-packages/blob/master/projects/angular-emojis/src/lib/angular-emojis.component.ts

3pmvbmvn

3pmvbmvn2#

我试过了,它对我起了作用。

TS

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  name = 'Angular';
  emojiName = '';
  emojiSize = 20;
  index = -1;

  list = [
    'full_moon_with_face',
    'first_quarter_moon_with_face',
    'star',
    'star2',
    'sun_with_face',
  ];

  function(str, i) {
    this.index = -1;
    this.emojiName = str;
    this.cdr.detectChanges();
    this.index = i;
  }
}

HTML

<hello name="{{ name }}"></hello>

<p>Click on any emoji to see the Result</p>

<span *ngFor="let emoji of list; index as i">
  <angular-emojis
    [name]="emoji"
    size="20"
    (click)="function(emoji, i)"
  ></angular-emojis>
</span>

<hr />
Resultant Emoji:
<angular-emojis
  *ngIf="index != -1"
  [name]="emojiName"
  [size]="emojiSize"
></angular-emojis>

您可以在这里查看run and check结果。

相关问题