Question

我有一个表，其中包含要用模型值填充的输入字段，我想对这些填充字段应用只读/禁用。当我单击添加行时，我将空行添加到表中。添加到表中的空行必须是可编辑的。我无法找到仅将readOnly / disable应用于已填充的表格单元的逻辑。

HTML

<table>
<thead>
    <th> Name </th>
    <th> Age </th>
    <th> Url </th>
    <th> Gender </th>
    <th> Image </th>
    <th> Keywords </th>
</thead>
<tbody>
    <tr *ngFor="let data of userList; let $index = index">
        <td> <input class="form-control" type="text" id="userListName"[(ngModel)]="userList[$index].name"
            name="userListName{{$index}}" [readonly]="userList[$index].name.length"/></td>
        <td> <input class="form-control" type="text" id="userListAge" [(ngModel)]="userList[$index].age"
            name="userListAge{{$index}}" readonly/></td>
        <td><input class="form-control" type="text" id="userListUrl" [(ngModel)]="userList[$index].url" name="userListUrl{{$index}}" readonly/></td>
        <td> <input class="form-control" type="text" id="userListGender" [(ngModel)]="userList[$index].gender"
            name="userListGender{{$index}}" readonly/></td>

        <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
            name="userListImage{{$index}}"  readonly/>
        </td>
        <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
            name="userListKeywords{{$index}}" readonly/></td>
      </tr>
     </tbody>

 <button (click) ="addRow()"> Add Row </button>
 </table>

组件：

 import { Component, OnInit } from '@angular/core';

 @Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })
 export class AppComponent {

 userList: userModel[] = [];

jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah"
}, 
{
name: 'cde',
age: 18,
url: "cde.com",
gender: "F",
image: "i-oddcion.png",
keywords: "blahhh"
}, 
{
name: 'efg',
age: 19,
url: "efg.com",
gender: "F",
image: "i-ocfffion.png",
keywords: "blahhhhhhh"
}
]
ngOnInit() {
this.userList = this.jsonUser;
}

addRow() {
this.userList.push(new userModel);
}
}

export class userModel {
name: string;
age: number;
url: any;
gender: string;
image: string;
keywords: string;
}

Demo

Answer 1

新的空行的索引为$index === userList - 1，因为它是该集合的最后一项。您可以使用该条件并应用所需的任何属性。

Answer 2

<td>
<input
    class="form-control"
    type="text"
    id="userListKeywords"
    [(ngModel)]="userList[$index].keywords"
    name="userListKeywords{{$index}}"
    [attr.disabled]="true" readonly/>
</td>

[attr.disabled] =“ true” 将使输入不可编辑，您可以修改代码以使该属性可配置。

在jsonUser对象内添加属性

jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah",
readonly: true
}, 
]

然后

<td>
<input
    class="form-control"
    type="text"
    id="userListKeywords"
    [(ngModel)]="userList[$index].keywords"
    name="userListKeywords{{$index}}"
    [attr.disabled]="userList[$index].readonly" readonly/>
</td>

[attr.disabled] =“ userList [$ index] .readonly”

Answer 3

完全注意以下代码：

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

在每个索引的数组中，必须有一个名为readonly的布尔值，当它为true时，输入字段将被禁用（不可编辑），否则它将被启用，

jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah",
readonly:true
}, 
{
name: 'cde',
age: 18,
url: "cde.com",
gender: "F",
image: "i-oddcion.png",
keywords: "blahhh",
readonly:false
}, 
{
name: 'efg',
age: 19,
url: "efg.com",
gender: "F",
image: "i-ocfffion.png",
keywords: "blahhhhhhh",
readonly:true
}
]

索引1和3将被禁用

Answer 4

您可以声明一个变量，该变量标识来自后端的数组的大小（例如initialArraySize），然后在添加新行时，验证该行的索引是否大于初始数组的大小（如果其为true），您就可以对其进行编辑。.

<tbody>
<tr *ngFor="let data of userList; let index = index">
    <td> <input class="form-control" type="text" id="userListName"[(ngModel)]="userList[index].name"
        name="userListName{{index}}" [readonly]="index >== initialArraySize"/></td>
</tr>
</tbody>

输入字段上的角度条件只读/禁用

4 个答案: