Question

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

我有以下内容：

 <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 to 12。任何帮助深表感谢！谢谢。

Answer 1

您可以添加指令

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

您可以在打字稿中执行此操作，并将其绑定到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
  }
}

另请参阅：

Answer 4

在您的问题中，您询问了AngularJS解决方案，但在代码中，您演示了Angular示例。我想确保您了解they are very different from each other。

以下代码摘自我的国际象棋游戏项目，使用AngularJS ：

HTML模板

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

<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（角度）

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() {
  }

}

如果要使用 CSS 选择那些网格，则需要attribute selector！例如：

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

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

4 个答案: