typescript - Angular 2 (ng2) som bruker async-pipen i [class.whatever]

Jeg jobber med en Angular 2-app, og i en av komponentene mine har jeg dette:

<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>

Fungerer fint i nettleseren, men når jeg prøver å lint’e min tilsvarende ts-fil, får jeg denne lint-feilen: "Metoden "async" som du prøver å få tilgang til finnes ikke i klassedeklarasjonen. (no-access-missing-member)" ved: '11,21'

Min komponentkode er som følger:

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

}

Er det en slags anti-pattern å bruke async-pipen til noe annet enn ngFor?

Jeg vet at jeg kan abonnere på observable og sette responsen til en lokal variabel og deretter sammenligne det i stedet for å bruke async pipe i [class.active], men jeg vil heller ikke gjøre noe i .ts-filen min som jeg bare kan gjøre i html-filen min.

Finnes det en måte jeg kan komme rundt denne feilen på slik at linteren min ikke roper på meg? Jeg har GitHub pre-commit hooks som sjekker linting, så jeg trenger en permanent løsning. Jeg fant ut at jeg kan sette en // tslint:disable-line på linjen som handler om endringsdeteksjon (linje 11), og det fikser det, men jeg har ingen anelse om hvorfor.

Svar #1

Usikker på om det løser problemet, men template-uttrykk kan fort bli rotete, du kunne gjort noe slikt:

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

Kontrolleren:

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

Svar #2

Jeg hadde det samme problemet og har klart å bli kvitt linter-klager ved å bruke safe navigation operator på denne måten. For deg kan det se slik ut.

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

Rediger: Fant en feilrapport i codelyzer versjon 2.0.0-beta.1 med no-access-missing-member konfigurasjon satt til true. Dette ser ut til å være et tilfelle for meg. Ser ut til å være fikset i senere versjoner, selv om jeg ennå ikke har prøvd.

Relaterte artikler