Текстовая область доступна только для чтения, если пользователь удаляет свою биографию. Как я могу предотвратить это

Question

Если пользователь удаляет свою биографию на странице своего профиля, поле становится доступным только для чтения, и вы не можете вводить текст.Довольно странно, что так работает.Как я могу сделать это поле редактируемым независимо от того, является ли его биография null или undefined?Сейчас я должен вручную вставить текст в поле firebase, чтобы текстовая область была редактируемой.

<ion-card>
  <ion-card-content>
    <ion-label>Enter bio</ion-label>
    <div *ngIf="bio">
      <textarea #myInput rows="2" maxLength="100" (keyup)="resize()" [(ngModel)]="bio" placeholder="Enter your bio"></textarea>
      <span>{{100 - bio.length}}</span>
    </div>
  </ion-card-content>
</ion-card>

Answer 1

Ваш вопрос *ngIf="bio".То, как написан шаблон, показывает только текстовую область, если био равно truthy.Это означает, что 0, '', undefined, null и некоторые другие значения приведут к тому, что div не будет отображаться.

Если вы переместите *ngIf из содержащего div в<span>, который отображает длину, это должно исправить вашу проблему.

<ion-card>
  <ion-card-content>
    <ion-label>Enter bio</ion-label>
    <div>
      <textarea #myInput rows="2" maxLength="100" (keyup)="resize()" [(ngModel)]="bio" placeholder="Enter your bio"></textarea>
      <span *ngIf="bio">{{100 - bio.length}}</span>
    </div>
  </ion-card-content>
</ion-card>