我有一个项目列表,对于每个项目列表我都有一个编辑表单。
<div *ngFor="let task of fridayEvents;let i = index" class="col-sm-4">
<div class="event-holder">
<div class="event--image_background" [style.backgroundImage]="'url(' + task?.imageSource + ')'"></div>
<div *ngIf="!editmode">
<span> {{ task?.eventName }} </span>
<span> {{ task?.eventAddress }} </span>
<span> {{ task?.startHour}} </span>
<span> {{ task?.endHour}} </span>
<span> {{ task?.eventDescription }}</span>
</div>
<div *ngIf="editmode" class="edit--form">
<mat-form-field>
<input #editEventName matInput type="text" name="edit_eventName" value="{{ task?.eventName }}">
</mat-form-field>
<mat-form-field>
<input #editEventAddress matInput type="text" name="edit_eventAddress" value="{{ task?.eventAddress }}">
</mat-form-field>
<mat-form-field>
<input #editEventStartHour matInput type="number" value="{{ task?.startHour }}">
</mat-form-field>
<mat-form-field>
<input #editEventEndHour matInput type="number" value="{{ task?.endHour }}">
</mat-form-field>
<mat-form-field>
<textarea #editEventDescription matInput value="{{ task?.eventDescription }}" name="" rows="10"></textarea>
</mat-form-field>
<button type="button" (click)="submitEdit($event, i , editEventName , editEventAddress, editEventStartHour, editEventEndHour, editEventDescription)">Save</button>
</div>
<button type="button" (click)="turnOnEditMode($event, i)">Edit</button>
</div>
</div>
因此,假设我的“ fridayEvents”是10个对象的列表。因此,我有10列,当单击Edit
按钮时,设置editmode = false
时,editform对所有对象变为活动状态,而不是仅对特定对象有效。是否可以仅针对特定元素而不是editmode
进行旋转,我可以创建1个编辑表单,将其放置在</body>
标记的末尾,然后将fridayEvents.object.id中的值用作values
个输入等...?