Question

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

采用类似（回答用户的名称）的格式，“válasza：ekkor :（日期），这表示他的回答。
每个问题下方都有 3个按钮，即+ C和-，询问该问题的人可以接受答案（+），拒绝答案（-）并取消应用或拒绝（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';
  }

“拒绝”和“清除答案”功能与此完全相同，但是具有红色和白色。
如果您有任何想法..请。

因此，简而言之：所有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表示接受/拒绝/清除颜色

如果我理解正确，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">

或将公共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">

Answer 2

这是我想出的。

更新的模板。添加了一个div，并将*ngFor移至其中，以允许我获取创建id所需的数据。 createId函数根据使用的值构建id。

<div class="container">
<ul class="list-group">
    <div *ngFor="let comment of actualComments">
    <li [id]="createId(comment.iro,comment.mikor,comment.leir)" class="list-group-item">
        <div>
            <b>{{comment.iro}}</b> válasza, ekkor: {{comment.mikor}} {{comment.leir}}
        </div>
        <br/>
        …

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

添加到组件以创建id。上面的模板中使用了此代码。

createId(iro, mikor, leir) {
    return `${iro}${mikor}${leir}`;
}

更新为acceptAnswer函数，以使用通过新的createId函数创建的新ID。

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

在Typescript

2 个答案: