单击是按钮时添加边框和背景颜色

Question

我正在开发一种用于评论的文本框。 当我单击“是”按钮时，我希望单击来自的框具有某种边框和背景颜色，以表明单击来自该框。

有人能帮我吗？

闪电战

代码

<div class="Submitcomments" *ngFor="let c of data; let  i = index;">
    <div>
        <div class="row rowComments" style="margin-top: 11px;">
        </div>
        <div class="form-group">
            <textarea  #myinput type="text" class="form-control AreaText" rows="2"></textarea>
        </div>
        <div class="row" style="margin-top: -20px; margin-left: 5px;">
            <button *ngIf="c.currentState=='pause'" class="btn reply" (click)="adjustState(i)">Yes</button>
            <button *ngIf="c.currentState=='start'" class="btn reply1" (click)="adjustState(i)">No</button>
        </div>
    </div>
</div>

Answer 1

您可以使用AfterViewInit等待组件加载AfterViewInit 。 然后每次在每个元素.Submitcomments内单击子btn只需更新每个textarea样式。

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';   

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    let submitComments = document.querySelectorAll('.Submitcomments');
    [].slice.call(submitComments).forEach((submitComment, index) => {
        submitComment.querySelector('.btn').addEventListener('click', (event) => {
            submitComment.querySelector('textarea').style.border = '1px solid red';
        });
    });
  }

https://stackblitz.com/edit/angular-qe9hac?file=src/app/app.component.ts

注意：我不是 angular 2 开发人员，所以我确信有一种更“angular”的方式来做到这一点。 但这暂时有效。

Answer 2

尝试在您的 html 中使用[ngStyle]绑定。

像这样的东西：

<textarea #myinput type="text" class="form-control AreaText" rows="2"
  [ngStyle]="{
    'background-color': c.currentState=='start' ? '#daf4d5' : 'initial', 
    'border': c.currentState=='start' ? '1px solid green' : ''
  }">
</textarea>

编写ngStyle有更短的方法，但这个方法允许您为未单击的框元素选择一种样式。 此外，您可能希望将组件中的ngStyle值作为字符串移动，并改为使用它（以使 html 更具可读性）。

Answer 3

试试这个，如果这是你需要的，也不要忘记给我点赞，因为这需要我花时间去做，我没有时间浪费在做这件事上，但如果这根本不起作用，你不必给我点赞，我只是说如果有效记得给我点赞

 window.onload = function() { //onclick event document.getElementById("yes").onclick = function fun() { var element = document.getElementById("yes"); element.classList.add("yeep"); element.classList.remove("unk"); } }

 .yeep{ background-color:green ; border-color:limegreen ; border-width:5px; color:white; } .unk{ background-color:darkgray; border-color:gray; border-width:5px; color:white; }

 <button class='unk' id = 'yes'>yes!</button>