角度2（ng2）使用[class.whatever]中的異步管道

Question

我正在開發一個有角度的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(),
      name: (Math.random().toString(36) + '00000000000000000').slice(2, 6),
      type: (Math.random().toString(36) + '00000000000000000').slice(2, 3),
    };
  }

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

}

在ngFor之外的某些東西中使用異步管道是否是某種類型的反模式？

我知道我可以訂閱observable並將response =設置為某個局部變量，然后比較它而不是使用[class.active]中的異步管道，但我寧願不在我的.ts文件中做一些事情我可以在我的html文件中做。

有沒有辦法可以解決這個錯誤，以便我的linter不會對我大喊大叫？ 我有github預提交鈎子，檢查linting所以我需要一個永久的解決方案。 我確實知道我可以在討論變更檢測（第11行） // tslint:disable-line上放置一個// tslint:disable-line並修復它但我不明白為什么。

Answer 1

不確定是否能解決問題，但模板表達式很快就會變得混亂，你可以這樣做：

<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'));
  }

Answer 2

我有同樣的問題，並且能夠使用像這樣的安全導航操作員擺脫linter抱怨。 對你而言，它可能看起來像這樣。

(viewService.observable | async)?.get('currentNode') === node.id

編輯：在codelyzer版本2.0.0-beta.1中找到錯誤報告，其中no-access-missing-member config設置為true。 這似乎是我的情況。 似乎在以后的版本中修復，但我還沒有嘗試。

Answer 3

我認為這有一個懸而未決的問題，需要在codelyzer中修復。 https://github.com/angular/angular-cli/issues/4351

但在此之前作為解決方法，您可以在組件中執行此操作以修復lint問題：

// TODO: fix this later
async: any;

constructor(..) {..}