Установка значения col- * динамически от значения объекта

Question

Я использую Ionic Framework и его сеточную систему (аналог Bootstrap). Тем не менее, я считаю, что мой вопрос больше связан с AngularJS, чем с ионными компонентами.

У меня есть следующее:

 <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

Вы можете сделать это в машинописи и связать с атрибутом 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>
  ...

использование pipe для отключения встроенной очистки 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
  }
}

Смотри также:

• угловые документы
• В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки
• Реализация угловой безопасной трубы для обхода удаления содержимого DomSanitizer
• Угловой DomSanitizer

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>

• Учебное пособие включено 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

В своем вопросе вы запросили решение AngularJS, но вместо этого в своем коде вы продемонстрировали пример Angular. Я хочу убедиться, что вы понимаете, что они очень отличаются друг от друга .

---

Следующий код взят из проекта моей шахматной игры с использованием 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 , вам понадобится селектор атрибутов ! Например:

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