html - 单击时文本旁边的复选框未启用，它始终是第一个

Question

我使用引导网格将复选框和文本排列在一起。但是，当我点击第一个以外的文本框时，只有第一个复选框被启用。如何在不扭曲顺序的情况下启用相应的复选框？

这是我的stackblitz 网址

标签： htmlangular

Answer 1

stackblitz 无法正常工作，但您可以尝试的一件事是使复选框的 id 像组件一样独特-

public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2, 
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4, 
"place":"chennai-secundrabad"}];

html-

<div class="col-sm-1" style="margin-top: 10px;">
                    <mat-checkbox class="check-style" id="route.id"></mat-checkbox>
                </div>
                <div class="col-sm-10">
                    <div class="routesList">
                        {{route.place}}
                    </div>
                </div>

我希望它有所帮助。