Question

我用html设置了一个表单，如果复选框被选中，则允许用户编辑单个配置文件。到目前为止，我正在使用ngFor循环用数据填充页面。问题是，如果我按下复选框，返回数据中的每个项目都将变为可编辑状态。

html看起来像这样：

<ul class="profiles">
    <li *ngFor="let profile of profiles">
            <ngb-panel title="Profile ID: {{profile.id}}">
                <ng-template ngbPanelContent>
                    <label>Check here to edit:
                        <input type="checkbox" [(ngModel)]="checked">
                        <form>
                            <fieldset [disabled]="!checked">
                                <input
                                    type="text"
                                    [(ngModel)]="profile.profileName"
                                    name="profileName"
                                >
                            </fieldset>
                        </form>
                </ng-template>
            </ngb-panel>
    </li>
</ul>

从技术上讲，这确实有效；选中复选框后，将启用以下输入。这里的问题是，因为我使用ngFor循环用配置文件信息填充html，所以选中一个复选框将启用所有配置文件部分。我需要做的是设置此功能，以便每个配置文件部分仅在其单独的编辑复选框被选中时才启用。有什么好的方法可以设置它，同时仍然允许for循环？

Answer 1

示例中的checked变量似乎不是特定于配置文件的（我需要确保您的JS代码具有100％的确定性，但这就是它的样子），因此您需要与每个配置文件相对应的checked属性，可以是配置文件对象的属性，也可以是其他某种方式。

<fieldset [disabled]="!checked"> <-- this is going to be the same for all profiles
    <input type="text" [(ngModel)]="profile.profileName" name="profileName">
</fieldset>

Answer 2

在您的ts中，创建一个临时配置文件数组，其中包含每个配置文件的<layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <import type="android.view.View"/> </data> <include android:id="@+id/included_layout" layout="@layout/included_layout" app:visibility="@{View.VISIBLE}"/> </layout>的密钥。这样，每个配置文件都可以被选中/取消选中。

checked

然后用HTML中的let tempProfiles = profiles.map((elem) => { let tempElem = {...elem} // don't want to modify the original Objects tempElem['checked'] = false return tempElem })循环

tempProfiles

角度：仅对html表单的某些部分启用表单输入

2 个答案: