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错误：＆＃34;方法＆＃34; async＆＃34;您尝试访问的内容在类声明中不存在。（无访问缺失-构件）＆＃39; at：＆＃39; 11,21＆＃34;

我的组件代码如下：

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文件中执行。

有没有办法可以解决这个错误，这样我的迷路不会对我大喊大叫？我有github预提交钩子，检查linting所以我需要一个永久的解决方案。我确实知道我可以在// tslint:disable-line上讨论变更检测（第11行）并修复它，但我不明白为什么。

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 version 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(..) {..}

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

3 个答案: