Угловой не работает внутри атрибута HTML

Question

Привет всем, я хочу установить data-toggle = variable {{hero.ID}}, но он не работает

И мой код Angular

<tr *ngFor="let hero of result" id="{{hero.iID}}">
        <td class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" (click)="checkedItem('check'+hero.iID)" id="check{{hero.iID}}" name="checkItem"
              type="checkbox" value="">
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nFullName}}</td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nPhone}}</td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nUserName}}</td>
        <td (click)="fDetail(hero.iID,hero.dBirthDay,hero.dCreateDate,hero.nAddress,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'red'}">{{hero.nAddress}}</td>
        <td (click)="fDeletes(hero.iID,hero.iActive)" class="btn {{hero.iActive?'btn-danger':'btn-info'}}">{{hero.iActive?"Disabled":"Active"}}</td>
  </tr>

И моя ошибка:

Can't bind to 'toggle' since it isn't a known property of 'td'. ("s,hero.nEmail,hero.nFullName,hero.nGender,hero.nPassWord,hero.nPhone,hero.nUserName)"
          [ERROR ->]data-toggle="{{hero.iID}}" data-target="#exampleModal" [ngStyle]="{'color':hero.iActive?'#3c4858':'re"): ng:///AppModule/CustomersComponent.html@221:14 

В конце концов: Как настроить атрибут data-toggle = {{ hero.ID }}?Или тоже самое?

Answer 1

Angular по умолчанию использует привязку свойства, но data-toggle не имеет свойства для.Чтобы явно указать Angular использовать привязку атрибутов, используйте вместо этого:

[attr.data-toggle] = "hero.iID"

Answer 2

Попробуйте использовать attr для привязки

[attr.data-toggle]="hero.iID"