Javascript Angular 6-在同一组件的变量更改上动态更改*ngFor元素的css属性

请看下图。我有画布上的p标签列表。就在画布下方，我有许多颜色和字体大小

下面是我的情景

在画布上添加文本。我想加多少就加多少

选择任意文本并更改所选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>

5。变色功能

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

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

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

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

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

@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);
  }

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

我建议在

*ngFor

循环中使用，以处理所有用于样式设置的DOM操作。在angular中直接操作DOM元素被认为是不可能的。这使您可以摆脱大量的操作代码

textAreasList

中的每个元素都应该是一个包含所有必要属性（如实际文本内容）和样式属性（如位置、颜色、大小等）的对象。例如：

{content:“Ravi1”，样式：{height:40，width:60，color:#ff0000}

根据用户是先选择颜色，然后在第二次单击中选择文本还是以其他方式选择文本，单击文本（单击颜色）后，您可以将选定的颜色（或选定的文本元素）存储在控制器中以引用它

模板：

我建议在

*ngFor

循环中使用，以处理所有用于样式设置的DOM操作。在angular中直接操作DOM元素被认为是不可能的。这使您可以摆脱大量的操作代码

textAreasList

中的每个元素都应该是一个包含所有必要属性（如实际文本内容）和样式属性（如位置、颜色、大小等）的对象。例如：

{content:“Ravi1”，样式：{height:40，width:60，color:#ff0000}

根据用户是先选择颜色，然后在第二次单击中选择文本还是以其他方式选择文本，单击文本（单击颜色）后，您可以将选定的颜色（或选定的文本元素）存储在控制器中以引用它

模板：

<button *ngFor="let colour of availableColours" icon-only ion-button (click)="selectedColour = colour)">
   <ion-icon [style.color]="colour" name="brush"></ion-icon>
</button>


<p  [...] (click)="applyStyles(textarea)">{{textarea.content}}</p>

applyStyles(textarea){
  textarea.styles.colour = this.selectedColor;
}