html - 在 Typescript 中更改列表项的背景

Question

我有一个页面，顶部有一个问题，下面有一个答案列表，您也可以添加新答案。 (下图)

格式如(回答用户的姓名) "válasza: ekkor: (date)，表示他的回答，此时。
每个问题下方都有+C和-3个按钮，提问者可以接受答案(+)、拒绝答案(-)、取消申请或拒绝(C) )。
问题是，如果我在任何行中按下任何按钮，效果只适用于第一个。
接受 -> 绿色背景，拒绝 -> 红色，C -> 白色

这是 HTML 代码:

<div class="container" style="...">
        <ul class="list-group">
            <li id="colorTarget" class="list-group-item" *ngFor="let comment of actualComments">

                <div style="...">
                    <b>{{comment.iro}}</b> válasza, ekkor: {{comment.mikor}} {{comment.leir}}
                </div><br/>

                <div class="row" style="width:120px;">
                    <div style="...">
                        <button class="btn btn-light" id="buttonTarget1" (click)="acceptAnswer(comment.iro,comment.mikor,comment.leir)">
                        +
                        </button>
                    </div>
                    <div style="...">
                        <button class="btn btn-light" id="buttonTarget2" (click)="clearAnswer(comment.iro,comment.mikor,comment.leir)">
                        C
                        </button>
                    </div>
                    <div style="...">
                        <button class="btn btn-light" id="buttonTarget3" (click)="denyAnswer(comment.iro,comment.mikor,comment.leir)">
                         -
                        </button>
                    </div>
                </div>

            </li>
        </ul>
    </div>

和 TypeScript:

acceptAnswer(iro, mikor, iras) {
    var x = this.answerid(iro, mikor, iras);         
    this.actualComments[x].accepted = 1;
    var target = document.getElementById("colorTarget");
    target.style.background = 'green';
    target.style.color = 'white';
  }

Deny 和 Clear Answer 功能与此完全相同，但颜色为红色和白色。
如果你有任何想法..请。

因此，简而言之:所有 li 的唯一 ID 并将此唯一 ID 传递给函数。

Answer 1

尝试在 li 元素上使用 CSS 类:

<div class="container" style="...">
  <ul class="list-group">
    <li id="colorTarget" 
        class="list-group-item {{ statuses[i] }}" 
        *ngFor="let comment of actualComments; let i = index;">

      <div style="...">
        <b>{{comment.iro}}</b> válasza, ekkor: {{comment.mikor}} {{comment.leir}}
      </div>
      <br/>

      <div class="row" style="width:120px;">
        <div style="...">
          <button class="btn btn-light" 
                  id="buttonTarget1" 
                  (click)="statuses[i] = 'accept'; acceptAnswer(comment.iro,comment.mikor,comment.leir)">
            +
          </button>
        </div>
        <div style="...">
          <button class="btn btn-light" 
                  id="buttonTarget2" 
                  (click)="statuses[i] = 'clear'; clearAnswer(comment.iro,comment.mikor,comment.leir)">
            C
          </button>
        </div>
        <div style="...">
          <button class="btn btn-light" 
                  id="buttonTarget3" 
                  (click)="statuses[i] = 'deny'; denyAnswer(comment.iro,comment.mikor,comment.leir)">
            -
          </button>
        </div>
      </div>

    </li>
  </ul>
</div>

这样每个 li 元素都将获得 CSS 类('accept'、'deny' 或 'clear')。我在每个按钮 (click) 函数中内联它，它也可以在 TS 文件中是圆顶。

现在只需添加一些 SCSS:

li {
  &.accept {
    color: white;
    background: green;
  }
  &.deny,
  &.clear {
    color: white;
    background: red;
  }
}

或 CSS:

li.accept {
  color: white;
  background: green;
}
li.deny,
li.clear {
  color: white;
  background: red;
}

如果您需要隔离li的选择，您可以将其ID添加到每个li，如li#colorTarget

现在，在你的 TS 文件中你不需要处理样式:

acceptAnswer(iro, mikor, iras) {
  var x = this.answerid(iro, mikor, iras);         
  this.actualComments[x].accepted = 1;
}

更新

你写道:

actualComment.accepted represent the accept/deny/clear colors

如果我理解正确，actualComment.accepted 将有一个代表三种颜色之一的整数。如果这是正确的，让我们假设 1 是绿色(接受)，2 和 3 是红色(拒绝和清除)。在这种情况下，您只能将 li 从我原来的答案更改为:

<li id="colorTarget" 
        class="list-group-item" 
        [class.accept]="comment.accepted === 1"
        [class.deny]="comment.accepted === 2"
        [class.clear]="comment.accepted === 3" 
        *ngFor="let comment of actualComments">

或将公共(public) statusesMap(或 ENUM)添加到您的 ts 文件中:

statusesMap = {
  1: 'accept',
  2: 'deny',
  3: 'clear'
}

在您的 HTML 中:

<li id="colorTarget" 
        class="list-group-item {{ statusesMap[comment.accepted] }}" 
        *ngFor="let comment of actualComments">