Angular 6如何将数据提供为空数组答案

【问题标题】：Angular 6 how to provide data as void arrayAngular 6如何将数据提供为空数组
【发布时间】：2019-02-04 23:46:19
【问题描述】：

我已经完成了搜索，它获取数组，然后在输入时过滤它的名称。如果我写静态，一切都很好：

export class AddComponent {
  protected dataService: CompleterData;
  protected searchData = [
    {name: '84A4DA'},
    {name: '846ASD'},
    {name: '8444AS'},
]
constructor(private completerService: CompleterService, private router: Router, public back: BackService,
             ) {
this.dataService = completerService.local(this.searchData, 'name', 'name');
}

但是当我尝试从 db firebase 制作我的 searchData 时：

getArray(): void {
    this.afDatabase.list('/imones')
      .valueChanges()
      .subscribe(res => {
        console.log(res)//should give you the array of percentage.
        this.array = res;
      })
}

this.searchData = this.back.getArray();
  constructor(private completerService: CompleterService, private router: Router, public back: BackService,
             ) {
    this.dataService = completerService.local(this.searchData, 'name', 'name');
}

我得到错误：

如何解决？

【问题讨论】：

你能为此创建一个堆栈闪电战吗？并添加completerService 的代码
完成服务是 ng2-completer 模块 - 不是我的。
getArray() 的返回类型是 void 类型，因此 searchData 是 void 类型，而不是数组。而是写，this.searchData = res;在订阅中，因为那是您的数组所在的位置。
它应该是什么样子？搜索数据 = ??
我的意思不是我改成searchdata = res的时候，而是之前声明的时候

标签： angular typescript firebase firebase-realtime-database

【解决方案1】：

问题在于，在构造函数中，this.SearchData 不是数组。解决办法是。 1.-您的服务必须返回一个可观察的。不订阅服务 2.-将代码从构造函数移动到 ngInit 3.-在订阅函数中，你有searchData的值

我很难理解你的代码，但是，如果你的服务返回 Observables - 而不是数据 - 我想你的组件可以像

constructor(private completerService: CompleterService, 
            private router: Router, public back: BackService){}
ngOnInit()
{
  this.back.getArray().subscribe(res=>{
      this.searchData=res;
      completerService.local(this.searchData, 'name', 'name').subscribe(res=>
      {
          this.dataService=res;
      });
  })
}

//Or , better, using switchMap
ngOnInit()
{
  this.back.getArray().pipe(switchMap(res=>{
      this.searchData=res;
      return completerService.local(this.searchData, 'name', 'name')
      }))
      .subscribe(res=>
      {
          this.dataService=res;
      });
}

【讨论】：

谢谢，我做的和第一个例子差不多，只是我不知道你为什么要订阅第二次，this.dataService = completerService.local.... 很好的解释。跨度>

【解决方案2】：

getArray() 方法不返回任何数组，但是当您订阅 afDatabase.list 时，您会得到一个我假设的值数组，因此在订阅回调中，您应该将值分配给您的数组。

getArray(): void {
this.afDatabase.list('/imones')
  .valueChanges()
  .subscribe(res => {
    console.log(res)//should give you the array of percentage.
    this.searchData = res;
  })}

或者，如果您要一一获取值，请编写

getArray(): void {
    this.afDatabase.list('/imones')
      .valueChanges()
      .subscribe(res => {
        console.log(res)//should give you the array of percentage.
        this.searchData.push(res); //searchData must be initialized as empty array
      })
}

【讨论】：

This.searchdata 会在服务中声明，如何在函数前声明？
然后从服务中返回 observable，并在组件中订阅它。
我正在尝试：this.searchData.push(res);，然后 this.back.searchData 在那个地方，但仍然没有，因为它是一个类似的对象：0 {0, 1, 2, 3}
我的意思是，我认为我没有得到任何东西，因为第一个值是 0，然后是 0,1,2,3,4