HTML 标签/元素无法识别输入元素的“ id”属性

Question

我正在编写一个使用ASP.Net Core作为后端，并使用bootstrap 4和ngx-bootstrap进行样式设置的Angular应用程序。

由于某种原因，在我所有的HTML <label>标签上（在每个component / html文件中，即使我具有与<label>标签的“ for”属性匹配的ID和Name属性），也找不到ID或公认的。我通过通过Chrome开发工具灯塔审核运行HTML验证了这一点。这是代码示例：

<div class="modal-header">
    <h4 class="fa-pull-left modal-title" id="modalTitle">{{title}}</h4>
</div>
<div class="modal-body" id="modalBody">
    <form id="modalForm">
        <div class="form-group">
            <label for="swName">Name</label>
            <input id="swName" name="swName" [(ngModel)]="switchman.Name" class="form-control" type="text" />
        </div>
        <div class="form-group">
            <label for="eid">EID</label>
            <input [(ngModel)]="switchman.Eid" class="form-control" id="eid" name="eid" type="text" />
        </div>
        <div class="form-group">
            <label for="homeOffice">Home Office</label>
            <input [(ngModel)]="switchman.HomeOffice" class="form-control" id="homeOffice" name="homeOffice" type="text" />
        </div>
<div class="modal-footer">
    <button (click)="accept()" class="btn btn-success mr-auto" type="button">
        Submit
    </button>
    <button (click)="reject()" class="btn btn-danger" type="button">
        Cancel
    </button>
</div>

例如，在本节中：

<form id="modalForm">
        <div class="form-group">
            <label for="swName">Name</label>
            <input id="swName" name="swName" [(ngModel)]="switchman.Name" class="form-control" type="text" />
        </div>

<input>的id="swName属性与for="swName"标记的<label>属性匹配，但根本没有应用，就好像id="swName"不存在。

如何获取标签以识别输入标签的ID？

Answer 1

这实际上是Resharper无法正确看到ID / For关系的问题。在使用Chrome Dev Tools和Lighthouse进行了进一步测试之后，我意识到我确实还有其他一些不相关的ID标签，这些ID标签尚待解决，一旦我解决了这些问题，Lighthouse中的错误就消失了，但是我的IDE仍然显示错误。我已经向JetBrains / ReSharper团队提交了一张票。附有屏幕截图。