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

Question

我正在使用 ionic 3 框架 和 Firebase 后端开发 Hybrid 聊天应用程序。我正在过滤从 firebase 获得的某些类型的数据。它正在工作，但 for 循环不断执行，一段时间后我的应用程序崩溃了。 我确实想检查用户的手机号码(我从数据库中获取)和我的联系人列表(用户的电话簿)。在这里，我还添加了一些 JavaScript 函数，用于删除数字之间的空格并获取数字的最后 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>

类型脚本

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
}

每当联系人列表更新/加载时调用 filterMoileNo() 函数(一次过滤联系人号码格式)

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

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