作为 *ngIf 的结果更改布尔变量的值

Posted 2023-03-13

【中文标题】作为 *ngIf 的结果更改布尔变量的值

【英文标题】：Changing the value of a boolean variable as a result of an *ngIf

【发布时间】：2019-12-26 10:37:45

【问题描述】：

我制作了一个应用程序，用户必须输入他的地址详细信息，然后将其存储在 Firebase 中将显示地址信息，但我不知道该怎么做。

我尝试使用 (ionChange) 调用函数并更改布尔变量值以显示用户地址详细信息（如果存在）和表单（如果不存在）。

这是我尝试过的代码

html

<ng-container *ngFor='let a of Addresses|async'>
    <ng-container *ngIf='a.UID == firebase.id;else other_content'>
      <ion-card (ionChange)='addressExists()'>
        a.City
      </ion-card>
    </ng-container>
    <ng-template #other_content>
      <ng-container  (ionChange)='addressDoesNotExist()'></ng-container>
    </ng-template>
  </ng-container>

TS

 Addresses;
  Exists = false;
  constructor(public afAuth:AngularFireAuth, public firebase: FirebaseProvider, 
    public navCtrl: NavController, public navParams: NavParams, public auth: AuthProvider) 
    this.Addresses = this.firebase.getAddresses();



addressExists()
  this.Exists = true;


addressDoesNotExist()
  this.Exists = false;

这是我的数据在 firebase 上的样子：https://imgur.com/a/T5fzD2U

【参考方案1】：

我认为不需要存储布尔值。你可以这样做：

HTML:<ng-container *ngIf='addressExists(a);else other_content'>

TS：addressExists(address) return address.uid === this.firebase.id

现在如果 addressExists 返回 true，它将显示：

<ion-card>
  a.City
</ion-card>

否则会显示：

<ng-template #other_content>
  <ng-container>... your form ...</ng-container>
</ng-template>

【讨论】：

非常感谢它有效，我不知道这种方法感觉它可以帮助我解决我的多个问题。

如果可能的话，你能帮我解决我遇到的另一个问题吗？因为我使用 ngFor 将地址 ID 与当前登录 ID 进行比较，所以即使在找到用户并显示他的地址之后，它也会显示表单，因为下一个 ID 不匹配：imgur.com/a/9E9iLaG

据我了解，您现在有一个地址列表，其中包含所有用户的所有地址。那么就不需要做一个ngFor了。只需创建一个方法来检查地址是否存在于列表中。在构造函数或 ngOnInit 中调用它。如果是这样，请将其存储在您的组件中。然后根据地址是否存在于组件中显示地址或表单。

换句话说，如果您只需要一个地址，为什么要在此组件中检索所有地址？不要调用 getAddresses()，而是在 FirebaseProvider 上创建一个新方法 getAddress()。

我是 firebase 新手，所以我只是按照我通常在课堂上学习的步骤进行操作。你能给我一些代码来说明如何做到这一点吗？