Angular 2 (ng2) using an asynchronous pipe in [class.whatever]

Question

I am working on an angular 2 application, and in one of my components I have this:

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

It works fine in the browser, but when I try to find the corresponding ts file, I get this error: "The async method" that you are trying to get does not exist in the class declaration. (no-access -missing member) "at: '11,21"

My component code is as follows:

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

Is this some kind of anti-pattern for using the asynchronous channel in something other than ngFor?

I know that I can subscribe to the observable and set the answer = to some local variable, and then compare this instead of using the async channel in [class.active], but I would rather not do something in my .ts file, which I I can only do it in my html file.

Is there any way around this error so that my linter does not yell at me? I have github pre-commit hooks that check the listing, so I need a permanent solution. I realized that I can put // tslint:disable-line on a line that says changes are detected (line 11), and this fixes it, but I have no idea why.

Answer 1

Not sure if this fixes the problem, but the template expressions can get confused quickly, you can do something like this:

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

Controller:

 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

I had the same problem and I was able to get rid of the linter complaint using a safe navigation operator like this. It may look like this to you.

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

Edit: An error report was detected in codelyzer version 2.0.0-beta.1 with the no-access-missing-member setting to true. This seems to be the case for me. It seems to be fixed in later versions, although I have not tried it yet.

Answer 3

I think there is an open problem for this that needs to be fixed in the encoder. https://github.com/angular/angular-cli/issues/4351

But as long as there is a workaround, you can do this in your component to fix the problem with the line:

 // TODO: fix this later async: any; constructor(..) {..}