角度6-动态更改*ngfor元素的css属性,用于相同组件的变量更改

请参见下图。我有画布上的P标签列表。就在画布下面,我有很多颜色和字体大小。

下面是我的场景

1. 在画布上添加文本。我可以根据自己的需要添加任意数量的内容。
3. 选择任何文本,并更改所选P标记的颜色和字体大小。

目前我做了以下代码:

1.HTML 。

<ion row canvasrow id=“canvasrow”>
<ion col*ngfor=“让textAreasList;让textArea_index=index”>
<p absolute drag style=“border:1px dotted black;
高度:40px;
宽度:60%;
z-index:10000;(click)=“changetextstyle($event)”(txtchange)=“changetxtcolor($event)”
(txtchange)=“更改txtsize($event)”>文本区域</p>
<button(click)=“删除文本区域(文本区域索引)”>删除</button>
</ion列
</ion行>
2.颜色代码选择


<ion row id=“top toolbar”>
<ion列
<ion scroll scrollx=“真”>
<ion buttons id=“ionbtngroup”>
<button*ngfor=“let colour of availablecolours”仅图标离子按钮(单击)=“ChangeCour(colour)”>
<ion icon[style.color]=“colour”name=“brush”></ion icon>
</button>
</ion按钮>
</ion滚动>
</ion列
</ion行>
3.字体更改代码


<ion buttons right*ngif=“!ISDRAW&!IsRotate“>
<button color=“dark”仅离子按钮图标(单击)=“ChangeFontSize(10)”><Div class=“Galeria”><span>10px</span></Div></button>
<button color=“dark”仅离子按钮图标(单击)=“ChangeFontSize(15)”><Div class=“Galeria”><span>15px</span></Div></button>
<button color=“dark”仅离子按钮图标(单击)=“ChangeFontSize(20)”><Div class=“Galeria”><span>20px</span></Div></button>
<button color=“dark”仅离子按钮图标(单击)=“ChangeFontSize(30)”><Div class=“Galeria”><span>30px</span></Div></button>
<button color=“dark”仅离子按钮图标(单击)=“ChangeFontSize(50)”><Div class=“Galeria”><span>50px</span></Div></button>
</ion按钮>
4.字体更改功能


changefontsize(size){
this.selectedfontsize=size+'px';
this.txtchange.emit(大小:大小+'px');
}
5.变色功能


changecolour(colour){
如果(this.isdraw){
this.currentcolour=颜色;
}否则{
this.selectedcolor=颜色;
this.txtchange.emit(颜色:颜色);
}
}
6.颜色和字体大小适用代码


@output()txtchange=new eventEmitter();
@output()txtChange=新eventEmitter();

ChangeTextStyle(事件:事件){
let element=event.target作为htmlinputement;
element.style.color=this.selectedcolor;
element.style.fontsize=this.selectedfontsize;
}

更改颜色(事件){
this.selectedcolor=event.color;
this.changeTextStyle(事件);
}

ChangeTxTSize(事件){
this.selectedfontsize=event.size;
this.changeTextStyle(事件);
}
如果有任何困惑,一定要告诉我。上面的代码不起作用。我想知道更有效的方法。


下面是我的场景


在画布上添加文本。我想加多少就加多少。
选择任何文本并更改所选P标记的颜色和字体大小。


目前我做了以下代码:

1。HTML

<ion-row #canvasRow id="canvasRow">
    <ion-col *ngFor="let textarea of textAreasList; let textarea_index= index">
        <p absolute-drag style="border: 1px dotted black;
            height: 40px;
            width: 60%;
            z-index: 10000;" (click)="changeTextStyle($event)" (txtCChange)="changeTxtColor($event)"
            (txtSChange)="changeTxtSize($event)">{{textarea}}</p>
            <button (click)="removeTextArea(textarea_index)">Remove</button>
    </ion-col>
  </ion-row>


2。颜色代码选择

<ion-row id="top-toolbar">
    <ion-col>
        <ion-scroll scrollX="true">
            <ion-buttons id="ionBtnGroup">
                <button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)">
                    <ion-icon [style.color]="colour" name="brush"></ion-icon>
                </button>
            </ion-buttons>
        </ion-scroll>
    </ion-col>
  </ion-row>


三。字体更改代码

<ion-buttons right *ngIf="!isDraw && !isRotate" >
        <button color="dark" ion-button icon-only (click)="changeFontSize(10)"><div class="galeria"><span>10px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(15)"><div class="galeria"><span>15px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(20)"><div class="galeria"><span>20px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(30)"><div class="galeria"><span>30px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(50)"><div class="galeria"><span>50px</span></div></button>
    </ion-buttons>


4。字体更改功能

changeFontSize(size){
  this.selectedFontSize = size+'px';
  this.txtSChange.emit({size: size+'px'});
}


5。变色功能

 changeColour(colour){
    if(this.isDraw){
      this.currentColour = colour;
    }else{
      this.selectedColor = colour;
      this.txtCChange.emit({color: colour});
    }
}


6。颜色和字体大小适用代码

@Output() txtCChange = new EventEmitter();
@Output() txtSChange = new EventEmitter();

changeTextStyle(event: Event){
    let element = event.target as HTMLInputElement;
    element.style.color = this.selectedColor;
    element.style.fontSize = this.selectedFontSize;
  }

  changeTxtColor(event){
    this.selectedColor = event.color;
    this.changeTextStyle(event);
  }

  changeTxtSize(event){
    this.selectedFontSize = event.size;
    this.changeTextStyle(event);
  }


如果有任何困惑,一定要告诉我。上面的代码不起作用。我想知道更有效的方法。