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

Question

我正在使用 Ionic Framework 及其网格系统（类似于 Bootstrap）。但是，我相信我的问题 AngularJS 比 Ionic 组件更多。

我有以下内容：

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

请注意，我必须为每个列动态设置值，因此在 col.size === 2 的情况下，上面的内容必须呈现为：

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

一种方法是提前设置所有列并根据我想要的任何大小调用 *ngIfs，这对于更简单的事情来说似乎有点矫枉过正。我也尝试过这样做： <ion-col *ngFor="let col of row.cols" [attr.col-2]="col.size === 2"></ion-col> 运气为零。

可能的值可能来自 1 to 12。任何帮助深表感谢！谢谢。

Answer 1

在您的问题中，您要求 AngularJS 解决方案，但在您的代码中您演示了 Angular 示例。我想确保您了解 .

以下代码取自我的棋牌游戏项目，使用AngularJS:

HTML Template

<main class="container">
    <div>
        <button class="btn btn-primary center" ng-click="startGame()">Start Chess</button>
    </div>
    <div class="game-board center">
        <div class="game-board-row" ng-repeat="row in rows">
            <div class="game-board-grid" ng-repeat="col in cols" data-x="{{ col }}" data-y="{{ row }}" ng-click="click(this);">
                <div class="piece" data-text-color="{{ game.data.grids[row][col].value.group }}" data-bg-color="game.data.grids[row][col].occupied">{{ game.data.grids[row][col].value.text }}</div>
            </div>
        </div>
    </div>
</main>

JavaScript (AngularJS)

<script type="text/javascript">
    let app = angular.module('game', []);
    app.run(($rootScope) => {
        $rootScope.rows = ['0', '1', '2', '3'];
        $rootScope.cols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
    });
</script>

如果您 使用 Angular，请将代码更改为以下样式：

HTML Template

<main class="container">
    <div>
        <button class="btn btn-primary center" (click)="startGame()">Start Chess</button>
    </div>
    <div class="game-board center">
        <div class="game-board-row" *ngFor="row in rows">
            <div class="game-board-grid" *ngFor="col in cols" [data-x]="col" [data-y]="row" (click)="click(this);">
                <div class="piece" [data-text-color]="game.data.grids[row][col].value.group" [data-bg-color]="game.data.grids[row][col].occupied">{{ game.data.grids[row][col].value.text }}</div>
            </div>
        </div>
    </div>
</main>

JavaScript (Angular)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.scss']
})
export class GameComponent implements OnInit {

  rows = ['0', '1', '2', '3'];
  cols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

  constructor() { }

  ngOnInit() {
  }

}

当你想要select那些带有CSS的网格时，你需要attribute selector！例如：

[data-x="1"][data-y="2"] {
    /* This selects the grid located at (1, 2) */
}

Answer 2

您考虑过使用 ng-container 吗？它们可能是完美的，因为它们不会显示在 DOM.

中

这仍然会创建所有 ion-col，就好像它们是使用您的原始代码生成的一样，但允许您将属性添加到循环的根元素。

<ng-container *ngFor="let col of row.cols">
    <ion-col col-{{col.col-size}}></ion-col>
</ng-container>

如果你有下面的数组：

{
  "rows": {
    "cols": {
      {
        "col-size": "2"
      },
      {
        "col-size": "4"
      },
      {
        "col-size": "6"
      }
    }
  }
}

HTML 然后输出如下：

<ion-col col-2></ion-col>
<ion-col col-4></ion-col>
<ion-col col-6></ion-col>

Tutorial On ng-container

Answer 3

您可以添加指令

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>

希望对您有所帮助。

Answer 4

您可以在打字稿中执行此操作并绑定到 innerHtml 属性：

component.ts:

  rows = {
    cols: [
      { "size": "1" },
      { "size": "3" },
      { "size": "5" }
    ]
  }
  html: string = '';

  constructor(public navCtrl: NavController) {
    this.rows.cols.map((col) => {
      this.html += '<ion-col class="col" col-' + col.size + '></ion-col>'
    });
  }
  ...

component.html:

  <div [innerHTML]="html | safeHtml"></div>
  ...

使用管道禁用 Angular 的内置清理。

safeHtml.pipe.ts:

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(value) {
    return this.sanitizer.bypassSecurityTrustHtml(value);
    // return this.sanitizer.bypassSecurityTrustStyle(value);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see DomSanitizer docs
  }
}

另请参阅：

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

Setting col-* value dynamically from object value

html

javascript

ionic-framework

ionic2

angular