單擊是按鈕時添加邊框和背景顏色

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>