javascript - Angular attr.data-target 和 attr.id 不起作用

Question

我正在尝试为我的引导模式分配唯一的 id，因为它正在使用 ngFor。以下是我的代码。

<div class="container shadow lead-container" data-toggle="modal" [attr.data-target]="customId"> -------------------------> . Data-target is set to customId
  <div class="row text-left">
    ----------------------> Other Content goes here
  </div>
</div>

<!--Lead Popup-->
<div class="modal fade" [attr.id]="customId" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> -----------> [attr.id] is set to customid
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="container popup-container">
          <div class="row text-left">

             -------------------------------------> Modal Content Goes Here 
        </div>
      </div>
    </div>
  </div>

以下是我的component.ts:

import { Lead } from './../models/lead';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-lead',
  templateUrl: './lead.component.html',
  styleUrls: ['./lead.component.css']
})
export class LeadComponent implements OnInit {
  @Input() public lead: Lead;
  @Input() public index;
  public customId: string;


  constructor() { 
  }

  ngOnInit() {
    this.customId = "custom".concat(this.index);
  }

}

当我点击div时。由于某种原因，模式不会弹出。任何帮助将不胜感激

Answer 1

在 ID 中添加“#”。

[attr.data-target]="'#'+customId"