有条件显示输入场 - 角反应形式

Question

问题：在尝试显示表单列表的特定索引的输入字段时，两个区域一次都显示一个。

澄清：我目前有一个植入*ngfor的表格。循环列表中的每个项目时，我可以禁用某些表单字段。但是，我想根据该特定索引的输入值隐藏/显示表单的特定索引的特定表单字段。

如果要记录的物品的当前输入时间是在分配的“晚期”时间之后，我想显示此“测试原因”输入。

中输入时间

当我尝试仅显示该特定索引的“测试季节”输入时，

从NGXMATDATEPICKER

 <div *ngIf="testList.length > 0">
    <div
      class="row"
      *ngFor="
        let test of testList;
        index as i;
        first as isFirst;
        last as isLast
      "
      [formGroup]="testFormGroup"
    >
      <!-- TEST -->
      <div class="row py-2 ms-3">
        <div class="col-2">
          <div class="row title">
            DUMMY DATA ORIGIN
          </div>
          <div class="row">{{ test.city  }}</div>
        </div>
        <div class="col-2">
          <div class="row title">
            {{
              isFirst
                ? "Pick Up Early"
                : isLast
                ? "Delivery Early"
                : "Intermediate Early"
            }}
          </div>
          <div class="row">
            {{ test.apptEarly | date: "MM/dd/yy HH:mm" }}
          </div>
        </div>
        <div class="col-2">
          <div class="row title">
            {{
              isFirst
                ? "Pick Up Late"
                : isLast
                ? "Delivery Late"
                : "Intermediate Late"
            }}
          </div>
          <div class="row">
            {{ test.apptLate | date: "MM/dd/yy HH:mm" }}
          </div>
        </div>
        <div class="col-2 float-left">
          <div class="row title anti-spacer">Arrived</div>
          <div
            class="row gx-1"
            *ngIf="!test.loggedArrival"
            style="margin-left: -10px"
          >
            <mat-form-field appearance="outline">
              <input
                matInput
                [ngxMatDatetimePicker]="picker"
                [formControl]="
                  testFormArr.controls[i]['controls']['arrivalTime']
                "
                [disabled]="
                  (i > 0 &&
                    testList[i - 1].loggedDepartureTime == null) ||
                  test.loggedArrival
                "
                class="form-field"
                (dateChange)="
                  testFieldInserted('arrivalTime', $event.value)
                "
              />
              <mat-datepicker-toggle
                matSuffix
                [for]="picker"
                [disabled]="
                  (i > 0 &&
                    testList[i - 1].loggedDeparture == null) ||
                  test.loggedArrival
                "
              >
                <mat-icon matDatepickerToggleIcon class="picker-icon">
                  calendar_today
                </mat-icon>
              </mat-datepicker-toggle>
              <ngx-mat-datetime-picker
                #picker
                [showSeconds]="false"
                [enableMeridian]
              >
                <ng-template>
                  <span>OK</span>
                </ng-template>
              </ngx-mat-datetime-picker>
            </mat-form-field>
          </div>
          <div class="row spacer" *ngIf="test.loggedArrival">
            {{ test.loggedArrival | date: "MM/dd/YY HH:mm" }}
          </div>
        </div>
        <div class="col-2">
          <div class="row title anti-spacer">Departure</div>
          <div
            class="row gx-1"
            *ngIf="!test.loggedDeparture"
            style="margin-left: -10px"
          >
            <mat-form-field appearance="outline">
              <input
                matInput
                [ngxMatDatetimePicker]="picker"
                [disabled]="
                  test.loggedDeparture ||
                  !test.loggedArrival
                "
                class="form-field"
                [formControl]="
                  testFormArr.controls[i]['controls']['departureTime']
                "
                (dateChange)="
                  testFieldInserted('departureTime', $event.value)
                "
              />
              <mat-datepicker-toggle
                matSuffix
                [for]="picker"
                [disabled]="
                  test.loggedDeparture ||
                  !test.loggedArrival
                "
              >
                <mat-icon matDatepickerToggleIcon class="picker-icon"
                  >calendar_today</mat-icon
                >
              </mat-datepicker-toggle>
              <ngx-mat-datetime-picker
                #picker
                [showSeconds]="false"
                [enableMeridian]
              >
                <ng-template>
                  <span>OK</span>
                </ng-template>
              </ngx-mat-datetime-picker>
            </mat-form-field>
          </div>
          <div class="row spacer" *ngIf="test.loggedDeparture">
            {{ test.loggedDeparture | date: "MM/dd/YY HH:mm" }}
          </div>
        </div>
        <div class="col-2">
          <div class="row title anti-spacer">Reason</div>
          <div class="row gx-1" style="margin-left: -10px">
            <mat-form-field appearance="outline">
              <input
                matInput
                class="form-field"
                placeholder="Choose Reason"
                [matAutocomplete]="testReason"
                [formControl]="
                  testFormArr.controls[i]['controls']['testReason']
                "
              />
              <mat-autocomplete #testReason="matAutocomplete">
                <mat-option
                  *ngFor="let test of testReason"
                  [value]="test.value"
                >
                  {{ test.name }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>
  </div>

我

    return this.formBuilder.group({

      arrivalTime: [''],

      departureTime: [''],

      testReason: [''],

    });

  }

  addFormControlItem() {

    this.testFormArr = this.testFormGroup.get('testFormArr') as FormArray;

    this.testFormArr.push(this.createFormControlField());

  }

  testFieldInserted(field: string, time: any): void {

    this.testCycleObject = {

      [field]: `${moment(test).format('YYYY-MM-DDTHH:mm:ss')}`,

    };

  }

  setTest() {

    this.testList = [];

    this.test.testTests.forEach((test, index) => {

      let testObject: TestObject = {

        city: test.city,

        state: test.state,

        apptEarly: test.appointmentEarly,

        apptLate: test.appointmentLate,

        arrivalTime:

          this.test.trackingTests &&

          this.test.trackingTests.length > 0 &&

          this.test.trackingTests.length > index

            ? this.test.trackingTests[index].arrivalTime

            : null,

        departureTime:

          this.test.trackingTests &&

          this.test.trackingTests.length > 0 &&

          this.test.trackingTests.length > index

            ? this.test.trackingTests[index].departureTime

            : null,

        actualArrivalTime: null,

        actualDepartureTime: null,

        lateReason: '',

      };

      this.testList.push(testObject);

      this.addFormControlItem();

    });

    this.validateButtons();

  }

  testReason = [

    {

      name: 'TEST REASON ONE',

      value: 'TEST REASON ONE',

    },

    {

      name: 'TEST REASON TWO',

      value: 'TEST REASON TWO',

    },

  ]; ```

Answer 1

您可以尝试使用 *ngif在您想要有条件渲染的测试[索引]中使用。