Невозможно получить значение тега привязки в выводе

Question

Я записал тег привязки json в typescript файл, а условие записано в html. Поэтому я не могу получить значение тега привязки:

<div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a ngClass="{{item.className}}" (click)="expandCollapse(i+1,item)" id="demo" role="button"
                    data-toggle="collapse" data-parent="#accordion" href="{{item.href}}" aria-expanded="true"
                    aria-controls="">
                    {{i+1}}. {{item.title}}
                  </a>
                </h4>
              </div>
              <div id="{{item.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body" style="padding-top: 0px;font-style: italic;padding-left: 30px;">
                  {{item.description}}
                </div>
              </div>

В файле .ts, который я написал json:

    this.items = [ {
              "id":"9","href":"#9","className":"addBorder collapsed","title":"Does the discount apply to my current insurance? ","description":"No. These are offers from other participating insurers, and the discount applies only to what they would otherwise charge in premiums without your driving data."
            },
            {
              "id":"10","href":"#10","className":"addBorder collapsed","title":"Click here to view more frequently asked questions","description":"<a  href='https://crrs.secure.force.com/hondaknowledge/articles/Public_Knowledge/HondaLink-Frequently-Asked-Questions-H/?l=en_US&c=Division_Subdivision%3AHondaLink&fs=Search&pn=1'>FAQ</a>"
            },
           ]

Answer 1

items - это массив, поэтому вам нужно передать индекс при обращении к нему в HTML

<div id="{{item[0].id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body" style="padding-top: 0px;font-style: italic;padding-left: 30px;">
    {{item[0].description}}
  </div>
</div>

или l oop в массиве, как показано ниже

<div *ngFor="let item of items">
  <div id="{{item.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body" style="padding-top: 0px;font-style: italic;padding-left: 30px;">
      {{item.description}}
    </div>
  </div>
</div>