kątowa 2 (NG2) za pomocą rury asynchronicznej w [class.whatever]

Question

pracuję na 2 kątowym i aplikacji w jednym z moich komponentów mam to:

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

Działa świetnie w przeglądarce, ale gdy Próbuję lint mój pasujący plik ts, otrzymuję ten błąd linting: "Metoda" async ", że próbujesz uzyskać dostęp nie istnieje w deklaracji klasy. (No-access-missing-member)" w: " 11,21"

Mój kod składnik jest w następujący sposób:

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

} 

Czy jest jakiś rodzaj wzorca zapobiegającego używaniu rury asynchronicznej w czymś innym niż ngFor?

Wiem, że mogę zapisać się do obserwowalnego i ustawić odpowiedź = na pewną lokalną zmienną, a następnie porównać to zamiast używać rury asynchronicznej w [klasie.aktywnej], ale wolę nie robić czegoś w moim. plik ts, który mogę zrobić w moim pliku html.

Czy istnieje sposób, w jaki mogę obejść ten błąd, aby mój liner na mnie nie krzyczał? Mam github pre-commit haki, które sprawdzają linting, więc potrzebuję stałego rozwiązania. Pomyślałem, że mogę umieścić // tslint:disable-line na linii, która mówi o wykryciu zmiany (linia 11) i to naprawia, ale nie mam pojęcia dlaczego.

Answer 1

Nie wiem, czy to rozwiąże problem, ale szablonów wyrażeń można dostać niechlujny szybko, można zrobić coś takiego:

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

Kontroler:

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

miałem ten sam problem i byli w stanie pozbyć się linter narzekać przy użyciu bezpiecznego operatora nawigacji w ten sposób. Dla ciebie może wyglądać tak.

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

Edycja: Znaleziono raport o błędzie w codelyzer version 2.0.0-beta.1 z no-access-missing-member config ustawiony na true. Wydaje mi się, że to jest sprawa dla mnie. Wydaje się być naprawiony w późniejszych wersjach, chociaż jeszcze nie próbowałem.

Answer 3

Uważam, że istnieje otwarty problem, który należy rozwiązać w koderyzacji. https://github.com/angular/angular-cli/issues/4351

Ale do tego czasu jako obejście można to zrobić w składniku Aby rozwiązać ten problem niestrzępiącą:

// TODO: fix this later 
async: any; 

constructor(..) {..}