html - 将 Angular 变量放入 HTML 属性中

Question

问题: 在下面的示例代码中，我们可以看到每条消息都有一个唯一的MessageSid。 在 HTML 代码中，我想设置

data-target="#deleteModal" to data-target="#{{message.MessageSid}}"

类似

id="deleteModal" to id="{{message.MessageSid}}"

我该怎么做？我希望每个模式对于每条消息都是单独的。

消息详细模型

export class MessageDetail {
    MessageSid: string;
    Body: string;
    Time: string;
    Direction: string;
    FromPhoneNumber: string;
    ToPhoneNumber: string;
}

HTML 代码

  <div id="listOfMessages" class="mt-5">
    <div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
      <img src="/assets/img/avatar.png" alt="Avatar">
      <p>{{message.Body}}</p>
      <button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" data-target="#deleteModal"><i class="fa fa-times"></i></button>
      <span class="time-right">{{message.TimeCreated}}</span>

      <!-- Confirm Delete Modal -->
      <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Delete Message</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Are you sure you want to delete this message?</p>
              <p>{{message.Body}}</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <!-- End Confirm Delete Modal-->

    </div>
  </div>

我自己尝试过这个解决方案。但列表中似乎只有 Modals 1、4、7 有效。单击时不会弹出中间的内容。

  <div id="listOfMessages" class="mt-5">
    <div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
      <img src="/assets/img/avatar.png" alt="Avatar">
      <p>{{message.Body}}</p>
      <button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" attr.data-target="#{{message.MessageSid}}"><i class="fa fa-times"></i></button>
      <span class="time-right">{{message.TimeCreated}}</span>

      <!-- Confirm Delete Modal -->
      <div class="modal fade" id="{{message.MessageSid}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Delete Message</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Are you sure you want to delete this message?</p>
              <p>{{message.Body}}</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <!-- End Confirm Delete Modal-->

    </div>
  </div>

Answer 1

您应该在 HTML 中执行以下操作:

...
<div [id]="'#' + message.messageSId"> </div>
...

在标签内，您应该使用 [attr]="typeScriptExpression" (属性绑定(bind))，而不是 attr={{typeScriptExpression}} (插值)

研究引用:https://angular.io/guide/template-syntax