角2使用[class.whatever]

我的工作角2應用程序，在我的部件之一我有這樣的異步管道（NG2）：角2使用[class.whatever]

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

在瀏覽器中的偉大工程，但是當我試圖將我匹配的ts文件粘貼到我的linting錯誤中：「您嘗試訪問的方法」async「在類聲明中不存在。（no-access-missing-member）' at：' 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); 
    } 

}

是否在某些類型的反模式中使用異步管道而不是ngFor？

我知道我可以訂閱observable，並將response =設置爲某個局部變量，然後比較它而不是使用[class.active]中的異步管道，但我寧願不在我的系統中執行某些操作。 ts文件，我可以在我的HTML文件中做。

有沒有辦法解決這個錯誤，讓我的棉絨不會吼我？我有github pre-commit鉤子檢查linting，所以我需要一個永久的解決方案。我弄清楚，我可以把一個// tslint:disable-line上談論變化檢測（第11行），並修復它，但我不知道爲什麼。

來源

2016-12-19 Ben Hernandez

針對文件執行錯誤說明了什麼？ - 我不確定你是否應該在你的模板文件上運行ts-linter，畢竟一個角度表達式並不是非常精確的打字稿 – olsn

這個錯誤在name.component.ts上顯示，我沒有使用我的模板文件。但是，如果我從模板文件中刪除了行['class.active] =「（viewService.observable | async）.get（'currentNode'）=== node.id」'，linting就會通過。這對我來說很奇怪，就像tslint以某種方式導入模板一樣。 –

這確實很奇怪 - 什麼時候完成了拍攝？你使用的是webpack，並且linting是在預加載器中完成的嗎？或者在包裝過程中的某個時候，等等？同樣有趣的是，它並沒有突出顯示'async'的其他用途。 – olsn

不知道是否能解決問題，但模板表達式可以迅速變得一團糟，你可以做這樣的事情：

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

來源

2016-12-20 15:44:23 olsn

欣賞它。我想過把它拉進控制器，但後來我失去了OnPush的優勢，我使用observables和不可變的工具。我可能會將服務本身從組件中取出，只需使用@Input（）從訂閱中壓下一個變量，但我無法弄清楚它爲什麼會遇到麻煩。 –

因此，將異步邏輯的部分移動到控制器並沒有改變任何東西？我以前沒有見過，如果你找到解決方案，請在這裏發佈。 - 也許作爲最後一個鏡頭：你在模板中使用「===」，「==」有什麼區別？ – olsn

不，當我將async作爲訂閱移動到控制器時它工作正常。我只是好奇，爲什麼我不能像我這樣做。 –

我有同樣的問題並已使用安全導航運營商這樣能夠擺脫linter抱怨。對你而言，它可能看起來像這樣。

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

編輯：發現no-access-missing-member配置設置爲true codelyzer version 2.0.0-beta.1的bug報告。這似乎是我的一個案例。似乎在後來的版本中修復，儘管我還沒有嘗試。

來源

2017-01-30 09:09:33

我認爲這是一個尚未解決的問題，需要在codelyzer中解決。 https://github.com/angular/angular-cli/issues/4351

但在此之前作爲一種解決方法，你可以在你的組件來解決問題皮棉做到這一點：

// TODO: fix this later 
async: any; 

constructor(..) {..}

來源

2017-07-12 17:51:58

角2使用[class.whatever]

回答

相關問題