Question

我有一个组件，我通过一个函数在ngStyle中建立它，除了溢出y之外，它可以工作所有样式，我不知道它是否真的自我设置好吗？

  onChangeFilterClientes(obj:any):any[]{        
    return this.clientes.filter(c => c.Nombre.toString().toLowerCase().indexOf(obj.query)>-1);        

  }

我的组件上的功能：

interface IOpcionesListaAutocomplete {
    width: number;
    height: number; 
    isOverflowY: boolean;
}

export class OpcionesListaAutocomplete implements IOpcionesListaAutocomplete {
    width: number;
    height: number; 
    isOverflowY: boolean;
    constructor()  { }
}

@Input()
opcionesLista: IOpcionesListaAutocomplete = {
    width: 550,
    height: 150,
    isOverflowY: true
};


addStylesLista(){  
    let styles= { 
      'heigth.px':this.opcionesLista.height,
      'width.px':this.opcionesLista.width,
      'overflow-y': this.opcionesLista.isOverflowY? 'auto': 'hidden'
    };
    return styles;
}

除溢出外，所有样式都可以正常工作。

Answer 1

尝试在问号和变量之间加一个空格。

  'overflow-y': this.opcionesLista.isOverflowY ? 'auto': 'hidden'

Answer 2

除了@Legman的答案之外，还注意到addStylesLista() 'height.px'方法中的另一个拼写错误（问题是'heigth.px'）。

Answer 3

由于其他地方的样式规范，它可能被覆盖了？尝试向其添加!important：

'overflow-y': (this.opcionesLista.isOverflowY? 'auto': 'hidden') + ' !important'

使用Angular2设置ngStyle

3 个答案: