कोणीय 2 (NG2) async पाइप [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> 

ब्राउज़र में बढ़िया काम करता है, लेकिन जब मैं अपनी मिलान करने वाली टीएस फ़ाइल को लिंट करने का प्रयास करता हूं, मुझे यह लिनिंग त्रुटि मिलती है: "जिस विधि को आप एक्सेस करने का प्रयास कर रहे हैं वह वर्ग घोषणा में मौजूद नहीं है। (नो-एक्सेस-लापता-सदस्य) ' यहां:' 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); 
    } 

} 

क्या यह एनजीएफओआर के अलावा किसी अन्य चीज़ में एसिंक पाइप का उपयोग करने के लिए कुछ प्रकार का एंटी पैटर्न है?

मुझे पता है कि मैं अवलोकन करने के लिए सदस्यता ले सकता हूं और कुछ स्थानीय चर के लिए प्रतिक्रिया = सेट कर सकता हूं और उसके बाद [class.active] में async पाइप का उपयोग करने की बजाय तुलना करता हूं लेकिन मैं अपने में कुछ नहीं करना चाहता। टीएस फाइल जो मैं सिर्फ अपनी एचटीएमएल फाइल में कर सकता हूं।

क्या इस तरह के त्रुटि के आसपास मैं एक रास्ता प्राप्त कर सकता हूं ताकि मेरा लिटर मुझ पर चिल्ला न सके? मेरे पास जिथब प्री-प्रतिबद्ध हुक है जो लिनिंग की जांच करता है इसलिए मुझे स्थायी समाधान की आवश्यकता है। मुझे पता चला कि मैं लाइन पर // 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

मैं एक ही मुद्दा था और सुरक्षित नेविगेशन ऑपरेटर का उपयोग कर लिटर शिकायत से छुटकारा पाने में सक्षम रहे हैं। आपके लिए यह ऐसा दिखाई दे सकता है।

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

संपादित करें: मिला no-access-missing-member config सही पर सेट के साथ codelyzer version 2.0.0-beta.1 में एक बग रिपोर्ट। यह मेरे लिए एक मामला प्रतीत होता है। लगता है कि बाद के संस्करणों में तय किया जाना चाहिए, हालांकि मैंने अभी तक कोशिश नहीं की है।

Answer 3

मुझे लगता है कि इसके लिए एक खुला मुद्दा है जिसे कोडेलीज़र में ठीक करने की आवश्यकता है। https://github.com/angular/angular-cli/issues/4351

लेकिन तब तक एक समाधान है कि आप अपने घटक फाहा समस्या को हल करने में कर सकते हैं के रूप में: फ़ाइल

जिसके लिए

// TODO: fix this later 
async: any; 

constructor(..) {..}