ngFor 循环继续执行并使用 firebase 数据库在 ionic 3 中使应用程序崩溃

Question

我正在使用 ionic 3 framework 和 Firebase 后端开发 Hybrid 聊天应用程序。我正在过滤从 firebase 获得的某些类型的数据。它正在工作，但 for 循环不断执行，一段时间后我的应用程序崩溃了。我确实想检查用户的手机号码（我从数据库中获取）和我的联系人列表（用户的 phone-book）。在这里，我还添加了一些 JavaScript 函数，用于删除数字之间的 space 并获取数字的最后 10 位数字。如果您知道更好的方法，请建议我。请在下面找到我的代码。谢谢。

Html

<div *ngFor="let key of filteredusers; let i = index">
  <ion-item *ngIf="arraysEqual2(key)">
    <ion-avatar item-start>
      <img src="{{key.photoURL}}">
    </ion-avatar>
    <h2>{{key.displayName}}</h2>
    <p *ngIf="key.phoneNumbers">{{key.mobile}}</p>
    <button ion-button outline item-end (click)="sendreq(key,i)">Add</button>
  </ion-item>
</div>

Ts

  arraysEqual2(data) {
    var number
    if (data.mobile) {
      number = data.mobile
    } else {
      number = ''
    }
    var contact: any
    for (contact of this.contactlist) {
      if (contact.phoneNumbers && this.setnumber(contact.phoneNumbers[0].value) == number) {
        return true
      }
    }
  }

  setnumber(str) {
    var filter1 = str.replace(/\s/g, '')
    var final = filter1.substr(str.length - 10)
    console.log(final)
    return final
  }

Answer 1

HTML

<div *ngFor="let key of filteredusers; let i = index">
<h2 *ngIf="arraysEqual2(key)">
  <!-- image -->
  <h2>displayName {{i}}</h2>
  <p >key.mobile {{i}}</p>
  <!-- <button ion-button outline item-end (click)="sendreq(key,i)">Add</button> -->
</h2>

TYPESCRITP

filteredusers:any = [{mobile:'9876543212'}, {mobile:'9876543211'}]
contactlist:any = [{phoneNumbers:'+91 9876 543 210'}, {phoneNumbers:'+91 9876 543 211'}, {phoneNumbers:'+91 9876 543 212'}, {phoneNumbers:'+91 9876 543 213'}]

// get last 10 digit mobile no at once [this will reduce your code execution, currently in your code setnumber function excute filteredusers.length * contactlist.length approximatily ]
filterMoileNo(){
  this.contactlist.forEach(element => {
  element.phoneNumbers = this.setnumber(element.phoneNumbers)
  // for your array
    element.phoneNumbers[0].value = this.setnumber(element.phoneNumbers[0].value)
  });
}

arraysEqual2(data) {
  var number
  if (data.mobile) {
    number = data.mobile
  } else {
    number = ''
  }

  return this.contactlist.some(el => el.phoneNumbers == number);
}

setnumber(str) {
  var filter1 = str.replace(/\s/g, '')
  var final = filter1.substr(filter1.length - 10)
  return final
}

每当联系人列表 updated/load 时调用 filterMoileNo() 函数（一次过滤联系人号码格式）

注意：不要在嵌套循环中使用控制台，因为它需要更多的内存来写入，如果您的逻辑可以用简单的方式完成，请避免嵌套循环。

请试试这个，我希望它会成功。

ngFor 循环继续执行并使用 firebase 数据库在 ionic 3 中使应用程序崩溃

ngFor loop continue executing and crash the app in ionic 3 with firebase database

javascript

for-loop

firebase

ionic3

angular