為什么在沒有顯示 ion-input 之后將任何內容（div、p 或只是文本）放入 ion-item 中？

Question

我需要驗證一個簡單的表單。 一切正常，但我在 ionic 3 列表項中放置文本消息時遇到了一個小問題。 ion-item包含ion-input元素。 如果我將div放在它下面，其中包含一些文本將不會顯示，但是如果我將該 div 放在項目之外，則消息會顯示在 DOM 中，在前一種情況下，我的消息甚至不存在於 DOM 中。

以下是不顯示消息的情況

<ion-item margin-bottom>
            <ion-input type="text" name="serial_number" #serialNum="ngModel" minlength="3" placeholder="WELL ID" [(ngModel)]="well.serial_number"
              required>
            </ion-input>
            <div class="text-md-danger" no-padding *ngIf="serialNum.invalid && (serialNum.dirty || serialNum.touched)">
              <div no-padding *ngIf="serialNum.errors.required">
                <small>
                  Providing WELL ID is mandatory.
                </small>
              </div>
              <div *ngIf="serialNum.errors.minlength">
                <small>
                  WELL ID must be at least 3 characters long.
                </small>
              </div>
            </div>
          </ion-item>

在以下情況下，消息將顯示但放置不正確，我想避免將自定義 CSS 放置在該輸入字段下方。

<ion-item margin-bottom>
        <ion-input type="text" name="serial_number" #serialNum="ngModel" minlength="3" placeholder="WELL ID" [(ngModel)]="well.serial_number"
          required>
        </ion-input>            
      </ion-item>
      <div class="text-md-danger" no-padding *ngIf="serialNum.invalid && (serialNum.dirty || serialNum.touched)">
          <div no-padding *ngIf="serialNum.errors.required">
            <small>
              Providing WELL ID is mandatory.
            </small>
          </div>
          <div *ngIf="serialNum.errors.minlength">
            <small>
              WELL ID must be at least 3 characters long.
            </small>
          </div>
        </div>

有誰知道為什么ion-item中ion-input下面的元素沒有顯示？

提前致謝

Answer 1

通常不屬於ion-item需要用item-content標記，因此您需要將該標記添加到您的包裝 div 中：

<div item-content *ngIf="....">

然后它應該像魅力一樣工作！ :) 演示

編輯

我們發現您實際上想將驗證消息放在字段下方，這樣可以通過ion-list inset並將驗證消息標記為單獨的ion-item ：

<ion-list inset>
  <ion-item>
    <ion-input type="text" name="serial_number" #serialNum="ngModel" minlength="3" placeholder="WELL ID" [(ngModel)]="well.serial_number"
      required>
    </ion-input>            
  </ion-item>
  <ion-item class="text-md-danger" *ngIf="serialNum.invalid && (serialNum.dirty || serialNum.touched)">
    <small *ngIf="serialNum.errors.required">
      Providing WELL ID is mandatory.
    </small>
  </ion-item>
</ion-list>