javascript – 从对象值动态设置col- *值

我正在使用Ionic Framework及其网格系统(类似于Bootstrap).但是,我相信我的问题是AngularJS比Ionic组件更多.

我有以下内容：

<ion-col *ngFor="let col of row.cols"></ion-col>

请注意,我必须动态设置每个col的值,因此,如果col.size === 2,则必须将以上内容呈现为：

<ion-col *ngFor="let col of row.cols" col-2></ion-col>

一种方法是提前设置所有cols并在我想要的任何尺寸上调用* ngIfs,这对于更简单的事情来说似乎有些过分.我也试过这样做：
< ion-col * ngFor =“let col of row.cols”[attr.col-2] =“col.size === 2”>< / ion-col>没有运气.

可能的值可以是1到12.
任何帮助深表感谢！谢谢.

解决方法

你可以添加指令

import { Directive,ElementRef,Renderer,Input,OnInit } from '@angular/core';

@Directive({
  selector: '[dynamic-col]'
})

export class DynamicColDirective implements OnInit {
  @Input('dynamic-col') value: string;

  constructor(private el: ElementRef,private _renderer: Renderer) {}

  ngOnInit() {
    this._renderer.setElementAttribute(this.el.nativeElement,'col-' + this.value,'');
  }
}

然后：

<ion-col *ngFor="let col of row.cols; let i = index" dynamic-col="{{i}}"></ion-col>

我希望这可以帮助你.

原文地址：https://www.jb51.cc/js/156542.html