我正在使用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 to 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>
我希望这可以帮助你。
你考虑过使用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>
您可以在typescript中执行此操作并绑定到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
}
}
也可以看看：
在您的问题中，您询问了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（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() {
}
}
当你想用CSS选择那些网格时，你需要attribute selector！例如：
[data-x="1"][data-y="2"] {
/* This selects the grid located at (1, 2) */
}