[英]How do I pass a value from *ngFor (Angular) to the data-target attribute?
I wanted to make dynamic collapsible lists using Angular and the Bootstrap library.我想使用 Angular 和 Bootstrap 库制作动态可折叠列表。 As I don't know how many there will be, I wanted to put them in the
*ngFor
loop.因为我不知道会有多少,所以我想把它们放在
*ngFor
循环中。 I ran into a problem at the very beginning.我一开始就遇到了问题。 I need to know what element I am folding and hiding.
我需要知道我正在折叠和隐藏什么元素。 For this purpose there are two parameters
data-target
(for a button) and id
for a list of text.为此,有两个参数
data-target
(用于按钮)和id
用于文本列表。 My method below doesn't work.我下面的方法不起作用。 I am getting an error:
我收到一个错误:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'button'. ("One">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" [ERROR ->]data-target="{{section.key}}" aria-expanded="true" aria-controls="collapseOne">
{{sect"): ng:///PortalModule/FaqComponent.html@14:64
Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'button'. ("One">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" [ERROR ->]data-target="{{section.key}}" aria-expanded="true" aria-controls="collapseOne">
{{sect"): ng:///PortalModule/FaqComponent.html@14:64
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11388)
at JitCompiler._parseTemplate (compiler.js:25961)
at JitCompiler._compileTemplate (compiler.js:25949)
at compiler.js:25893
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25893)
at compiler.js:25806
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25805)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
Here's my code.这是我的代码。
<div id="accordion">
<div *ngFor="let section of sections; let i = index">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="{{section.key}}" aria-expanded="true" aria-controls="collapseOne">
{{section.value}}
</button>
</h5>
</div>
<div id="{{section.key}}" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
The problem is these 2 parameters.问题是这两个参数。 I don't know how I can dynamically assign them.
我不知道如何动态分配它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.