[英]Angular 6- Dynamically change css properties for *ngFor elements on variable change of same component
please see below image. 请参见下图。 I have list of p tags on canvas. 我在画布上有p标签的列表。 Just below canvas, I have number of colours and font sizes. 在画布下面,我有许多颜色和字体大小。
Below is my scenario 以下是我的情况
Currently I did below code: 目前,我做了下面的代码:
1. HTML 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. Color code selection 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>
3. Font change code 3.字体更改代码
<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. Font change function 4.字体变更功能
changeFontSize(size){
this.selectedFontSize = size+'px';
this.txtSChange.emit({size: size+'px'});
}
5. Colour change function 5.换色功能
changeColour(colour){
if(this.isDraw){
this.currentColour = colour;
}else{
this.selectedColor = colour;
this.txtCChange.emit({color: colour});
}
}
6. Colour and font size applicable code 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);
}
Do let me know if have any confusion. 请让我知道是否有任何混淆。 Above code is not working. 上面的代码不起作用。 I want to know more efficient way. 我想知道更有效的方法。
I would suggest utilising ngStyle
inside your *ngFor
loop to take care of all the DOM manipulation for styling. 我建议您在*ngFor
循环中利用ngStyle
来处理样式的所有DOM操作。 It's considered a no-go to directly manipulate DOM elements inside angular. 直接在angular内操作DOM元素被认为是不可行的。 This allows you to get rid of a lot of manipulation code. 这使您可以摆脱许多操作代码。
Every element inside textAreasList
should be an object containing all necessary properties (like the actual text content) and the styling attributes like position, color, size, etc. Example: { content: "Ravi1", style: {height: 40, width: 60, color: "#ff0000"} }
textAreasList
内的每个元素textAreasList
应该是一个包含所有必要属性(如实际文本内容)和样式属性(如位置,颜色,大小等)的对象。示例: { content: "Ravi1", style: {height: 40, width: 60, color: "#ff0000"} }
Depending on whether the user first selects the color and in a second click selects the text or the other way round, you may store the selected color (or the selected text element) in your controller to reference it, once the text is clicked (the color is clicked). 根据用户是先选择颜色,还是第二次单击选择文本,或者反之,您可以将所选颜色(或所选文本元素)存储在控制器中以供参考,一旦单击文本(颜色)。
Template: 模板:
<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>
Controller: 控制器:
applyStyles(textarea){
textarea.styles.colour = this.selectedColor;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.