角度2(ng2)使用[class.whatever]中的异步管道

发布时间：2020-12-17 07:10:41 所属栏目：安全来源：网络整理

导读：我正在开发一个有角度的2应用程序,在我的一个组件中,我有这个： p class="newNode" input [(ngModel)]="formNode.id" placeholder="id" input [(ngModel)]="formNode.name" placeholder="name" input [(ngModel)]="formNode.type" placeholder="image" butto

我正在开发一个有角度的2应用程序,在我的一个组件中,我有这个：

<p class="newNode">
  <input [(ngModel)]="formNode.id" placeholder="id">
  <input [(ngModel)]="formNode.name" placeholder="name">
  <input [(ngModel)]="formNode.type" placeholder="image">
  <button (click)="addNode()">Add</button>
</p>

<app-node-info *ngFor="let node of ((nodesService.observable | async) | immutableMapOfMaps)"
  [node]="node"
  [removeNode]="removeNode.bind(this)"
  [class.active] = "(viewService.observable | async).get('currentNode') === node.id"
  (click) = "viewService.setCurrentNode(node.id)">
</app-node-info>

在浏览器中工作得很好但是当我尝试lint匹配的ts文件时,我得到了这个linting错误：“你试图访问的方法”async“在类声明中不存在.(no-access-missing-会员)’
at：’11,21“

我的组件代码如下：

import { ChangeDetectionStrategy,Component,OnInit } from '@angular/core';
import { clone } from 'ramda';
import { UUID } from 'angular2-uuid';

import { StateService } from '../state.service';

import { D3Node } from '../../non-angular/interfaces';
import { NodesService,ViewService } from '../../non-angular/services-helpers';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,selector: 'app-list-of-nodes',styleUrls: ['./list-of-nodes.component.css'],templateUrl: './list-of-nodes.component.html',})
export class ListOfNodesComponent implements OnInit {
  formNode: D3Node;
  /**
   * The injected service from ./state.service
   */
  private nodesService: NodesService;
  private viewService: ViewService;

  constructor(state: StateService) {
    this.nodesService = state.twiglet.nodes;
    this.viewService = state.view;
  }

  ngOnInit () {
    this.formNode = {
      id: UUID.UUID(),name: (Math.random().toString(36) + '00000000000000000').slice(2,6),type: (Math.random().toString(36) + '00000000000000000').slice(2,3),};
  }

  addNode () {
    this.nodesService.addNode(clone(this.formNode));
    this.formNode = {
      id: UUID.UUID(),};
  }

  removeNode (node: D3Node) {
    this.nodesService.removeNode(node);
  }

}

在ngFor之外的某些东西中使用异步管道是否是某种类型的反模式？

我知道我可以订阅observable并将response =设置为某个局部变量,然后比较它而不是使用[class.active]中的异步管道,但我宁愿不在我的.ts文件中做一些事情我可以在我的html文件中做.

有没有办法可以解决这个错误,以便我的linter不会对我大喊大叫？我有github预提交钩子,检查linting所以我需要一个永久的解决方案.我确实知道我可以在讨论变更检测(第11行)的行上放置一个// tslint：disable-line并修复它但我不明白为什么.

解决方法

不确定是否能解决问题,但模板表达式很快就会变得混乱,你可以这样做：

<app-node-info ...
    [class.active]="(currentNode | async) == node.id">
</app-node-info>

控制器：

export class ListOfNodesComponent implements OnInit {
  formNode: D3Node;
  /**
   * The injected service from ./state.service
   */
  private nodesService: NodesService;
  private viewService: ViewService;

  private currentNode: Observable<any>;

  constructor(state: StateService) {
    this.nodesService = state.twiglet.nodes;
    this.viewService = state.view;

    currentNode = this.viewService.observable
      .map(val => val.get('currentNode'));
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!