显示带有条件而不是全部的特定元素的编辑表单

时间:2018-06-27 18:34:25

标签: angular angular-ng-if ngif

我有一个项目列表,对于每个项目列表我都有一个编辑表单。

         <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个输入等...?

0 个答案:

没有答案