ngStyle ve ngClass angular2 içinde

Question

En son beta-12 ile ngStyle yönergesini nasıl kullanacağımı bilmiyorum. Birisi açıklığa kavuşabilir.

https://angular.io/docs/js/latest/api/common/NgStyle-directive.html numaralı belgede plnkr bağlantısı güncelliğini yitirmiş, alfa derlemesini kullanır.

Bu sözdizimini denedim, ancak çalışmıyor gibi görünüyor. Ben

[ngStyle]="{'display': none}" 
[style.display]="none" 

http://plnkr.co/edit/U9EJuIhFqxY9t2sULMdw

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2 [ngStyle]="{'display': none}">Hello {{name}}</h2> 
     <h2 [style.display]="none">Hello {{name}}</h2> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

Answer 1

Her iki durumda da, none tırnak 'none' olmalıdır. Çünkü display numaralı tesise string değerini atamanız gerekir. (Qoutes olmadan) none zamanında değerlendirilen ve bu NgClass directive için angular2 dokümanlar ila

güncelle CSS özelliği display

//our root app component 
import {Component} from 'angular2/core' 
@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2 [ngStyle]="{'display': 'none'}">Hello {{name}}</h2> 
     <h2 [style.display]="'none'">Hello {{name}}</h2> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

Here is your plunker fixed

kabul edilebilir bir değeri olmadığı undefined geri edilecektir :

The r bir ekspresyon değerlendirmenin esult ifade değerlendirme sonucunun türüne bağlı olarak farklı yorumlanır:

dize - bir dizi (boşluk ayrılmış) listelenen tüm CSS sınıfları
dizi eklendi - tüm CSS değerleri Boolean değerlendiren ifadeler olarak yorumlanır ederken CSS sınıfının adıyla her anahtar karşılık gelir - sınıfları (Dizi elemanları)
Obje eklenir. Verilen bir ifade değerini true olarak değerlendirirse, karşılık gelen bir CSS sınıfı eklenir - aksi halde kaldırılır.

@Component({ 
    selector: 'my-app', 
    providers: [], 
    styles:['.hide{display:none}', 
    '.border{border:3px solid blue}', 
    '.redBack{background-color:red}' 
    ], 
    template: ` 
    <div> 
     <h2 [ngStyle]="{'display': 'none'}">Hello {{name}}</h2> 
     <h2 [style.display]="'none'">Hello {{name}}</h2> 
     <h2 [ngClass]="'redBack'">Hello {{name}}</h2> // just normal string 
     <h2 [ngClass]="{'hide':hideFlag}">Hello {{name}}</h2> // will add class 'hide' if hideFlag is true 
     <h2 [ngClass]="mulClasses">Hello {{name}}</h2> // will add an array of classes ['border','redBack'] 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    hideFlag = false; 
    mulClasses = ['border','redBack'] 

    constructor() { 
    this.name = 'Angular2' 
    } 
} 

here is the example in plunker