Question

我有一个“ tags”组件变量，该变量生成白名单和黑名单。当前，我有一个updateTagLists（）函数，该函数将更新各自的白名单和黑名单，但我必须确保在必要时调用此函数，以便正确更新白名单/黑名单。这似乎违反直觉，并且感觉不正确。当this.tags更改时，具有this.whitelist和this.blacklist自动更新的正确方法是什么？下面发布的是我的组件。

console.log

Answer 1

而不是使用像这样的函数：

updateTagLists() {
  this.whitelist = this.tags.filter((tag: Tag) => tag.isWhitelisted );
  this.blacklist = this.tags.filter((tag: Tag) => !tag.isWhitelisted );
}

只需使用2个TypeScript吸气剂，如下所示：

get whitelist() {
  return this.tags.filter((tag: Tag) => tag.isWhitelisted )
}

get blacklist() {
  return this.tags.filter((tag: Tag) => !tag.isWhitelisted )
}

您可以像这样在HTML中引用它们：

{{ whitelist | json }} {{ whitelist.length }}
{{ blacklist | json }} {{ blacklist.length }}

或者在您的控制器中这样：

console.log(this.whitelist)
console.log(this.blacklist)

并且它们将始终是100％准确的。无需担心在正确的时间调用函数以保持其值更新。

Answer 2

您将在tags变量上使用setter。

这是一个例子：

...

private _tags: any;

set tags(someTags: any) {
  this._tags = someTags;
  this.updateTagLists();
}

get tags(): any {
  return this._tags;
}

...

当值更新时，它将运行set函数。 set函数将设置一个私有变量，该变量保存当前标签的值，并调用更新其他列表。 getter从私有var获取值并返回。

Answer 3

我不完全理解这个问题，但是如果您想对tags的更改执行一些操作。然后为其创建一个setter函数，以便this.tags仅通过此函数进行更新。

setTags(tags) {
   this.tags = tags;
   this.updateWhitelist();
   this.updateBlacklist();
}

从代码来看，似乎仅从onInit（）函数更改了标签。但是，如果您想将标签设为input（），那么

private _tags;

@Input()
set tags(tags) {
   this._tags = tags;
   this.updateWhitelist();
   this.updateBlacklist();
}

get tags()  {
   return tags;
}

Answer 4

最好的方法是只处理一个tags数组，然后根据该数组做有需要的事情。

我已经更新了您的whiteListAll，blackListAll和handleToggle方法。

import { Component } from '@angular/core';
import { TagService } from './tag.service';

export interface Tag {
  id: number;
  name: string;
  isWhitelisted: boolean;
  updated: boolean;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tags: Tag[];

  get whiteListedTags() {
    return this.tags.filter(tag => tag.isWhitelisted);
  }

  get whiteBlackTags() {
    return this.tags.filter(tag => !tag.isWhitelisted);
  }    

  constructor(private tagService: TagService) {}

  ngOnInit() {
    this.tagService.getTags(1).then((tags) => {
      this.tags = tags;
    });
  }

  whitelistAll() {
    this.tags = [...this.tags.map(tag => ({...tag, isWhitelisted: true, updated: true}))];
  }

  blacklistAll() {
    this.tags = [...this.tags.map(tag => ({...tag, isWhitelisted: false, updated: true}))];
  }

  handleToggle(index) {
    this.tags[index].isWhitelisted = !this.tags[index].isWhitelisted;
  }
}

在模板中，您可以通过检查Tag属性是否为isWhitelisted来检查是否将true列入白名单。

或者，您也可以创建getters来获取列入黑名单和白名单的标签，

这是您推荐的Sample StackBlitz。

当检测到对另一个变量的更改时，如何自动更新Angular 6组件变量？

4 个答案: