[英]How do I pass a value from *ngFor (Angular) to the data-target attribute?
我想使用 Angular 和 Bootstrap 庫制作動態可折疊列表。 因為我不知道會有多少,所以我想把它們放在*ngFor
循環中。 我一開始就遇到了問題。 我需要知道我正在折疊和隱藏什么元素。 為此,有兩個參數data-target
(用於按鈕)和id
用於文本列表。 我下面的方法不起作用。 我收到一個錯誤:
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)
這是我的代碼。
<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>
問題是這兩個參數。 我不知道如何動態分配它們。
這是可能有幫助的答案。
[attr.data-target]="value"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.