Как установить различный атрибут элемента DOM из переменной угловой 2?

Question

В моем приложении у меня есть переменная String. Который имеет в имени строки добавляемого атрибута.

ngOnInit() 
{ 
    this.colAttibute = 'width-50'; 
}  

или он может быть равен «ширина-100». Мое приложение получает ширину устройства и задает значение этой переменной по методу onNgInit. Я хочу, чтобы установить этот атрибут в моем HTML код что-то вроде этого:

<ion-list no-lines *ngIf="list"> 
    <ion-list-header> 
    Лидеры продаж 
    </ion-list-header> 
    <ion-item class="categoryProductItem" *ngFor="let row of list;"> 
     <ion-row wrap > 
     <ion-col *ngFor="let product of row" $colAttibute > <!--Here must be width-50 or width-100 attribute--> 
      <a ion-item detail-push (click)="onSelectItem(product)" > 
      <div class="categoryProductItemImage" *ngIf="product.getMainImage()"> 
       <ion-img [src]="product.getMainImage()['small_url']"></ion-img> 
      </div> 
      <h2> 
       {{product.title}} 
      </h2> 
      </a> 
     </ion-col> 
     </ion-row> 
    </ion-item> 
</ion-list> 

Как это сделать?

Answer 1

Вы можете установить ширину, как это:

<ion-col [attr.width-70]="flag"> 

Если флаг является логическое значение, указывающее, следует ли применять этот атрибут или нет. К сожалению, вам нужно будет указать все доступные атрибуты, чтобы поддерживать их динамически.