angular - 无法在输出中获取锚标记值
问题描述
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>"
},
]
解决方案
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>
或像下面这样循环数组
<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>
推荐阅读
- sql - 无效的请求“分组依据”(oracle)
- rust - 如何在另一个项目中生锈宏?
- xcode - 在没有制作文件的 Xcode 的 GUI 中构建通用二进制文件(Apple Silicon 和 Intel)?
- sql-server - PowerShell:授予用户连接数据库引擎的权限
- javascript - 有没有办法让 NextJS 整个应用程序中的对象保持活动状态
- angular - JEST:尽管使用了未知组件,但单元测试成功
- python - Dash -Datatable 中具有多个输入(输入和下拉菜单)的回调
- javascript - 无法映射并获取对象数组中存在的数据
- reactjs - 如何修复错误代码:422(无法处理的实体)?
- javascript - 为什么我的计算机无法识别我的 HTML 画布元素?