[英]how to index with edit button with exact value and then save on index?
I got an issue when I click on edit button.单击编辑按钮时出现问题。 it will edit on all selected data.
它将编辑所有选定的数据。 I need to edit on particular index value but I didn't get that value.
我需要编辑特定的索引值,但我没有得到那个值。
selectedVtuCommands
is an array of strings that are selected. selectedVtuCommands
是所选字符串的数组。
.html file .html 文件
<div id="vtu-command-div">
<ul id="selected-command-list" class="list-group">
<li
class="list-group-item"
*ngFor="let command of selectedVtuCommands; let commandIndex = index"
>
<div class="mt-2 d-inline-block" *ngIf="!editing">
{{ command }}
</div>
<div id="inputediv" *ngIf="editing">
<input
class="mt-2 d-inline-block"
type="text"
[(ngModel)]="command"
[disabled]="!editing"
/>
</div>
<button
(click)="deleteVtuCommand(command)"
class="btn btn-danger pull-right ml-2"
>
<i class="fa fa-trash"></i>
</button>
<button
*ngIf="!editing"
class="btn btn-danger pull-right"
(click)="editClick(command, commandIndex)"
>
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</li>
</ul>
</div>
.ts file .ts 文件
editing: boolean = false;
editClick = (command: string, index: number) => {
this.logger.trace('editClick() called with command', command);
this.editing = true;
if (this.editing) {
this.logger.trace(
'before editClick() called with this.editing',
this.editing
);
const index = this.selectedVtuCommands.findIndex(
(arg) => arg === command
);
this.logger.trace('after click editClick() called with index', index);
}
this.logger.trace('editClick() called with this.editing', this.editing);
};
There are many ways to do this, but in your case you could store an editingIndex
instead of a boolean
for tracking the editing
state and compare that with the current commandIndex in the template.有很多方法可以做到这一点,但在您的情况下,您可以存储一个
editingIndex
而不是boolean
来跟踪editing
state 并将其与模板中的当前 commandIndex 进行比较。
editingIndex === commandIndex // editing
editingIndex !== commandIndex // not editing
So then in your html template you get something like:那么在您的 html 模板中,您会得到如下内容:
<div id="vtu-command-div">
<ul id="selected-command-list" class="list-group">
<li *ngFor="let command of selectedVtuCommands; let commandIndex = index"
class="list-group-item">
<div *ngIf="editingIndex !== commandIndex; else editingTemplate"
class="mt-2 d-inline-block">
{{ command }}
</div>
<ng-template #editingTemplate>
<div id="inputediv" *ngIf="editingIndex === commandIndex">
<input
class="mt-2 d-inline-block"
type="text"
[(ngModel)]="command"/>
</div>
</ng-template>
<button
(click)="deleteVtuCommand(command)"
class="btn btn-danger pull-right ml-2">
<i class="fa fa-trash"></i>
</button>
<button
*ngIf="editingIndex !== commandIndex"
class="btn btn-danger pull-right"
(click)="editClick(command, commandIndex)"
>
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</li>
</ul>
</div>
In your ts file you make following changes:在您的 ts 文件中,您进行以下更改:
editingIndex: number;
editClick = (command: string, index: number) => {
this.editingIndex = index;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.