存储离子 4

Question

我是 Angular 世界的初学者，我很想在离子存储 4 中插入和检索信息，但是，当我尝试检索它时 returns 我是空数组.

我做了以下事情

export class OcorrenciasPage implements OnInit {

  public ocorrencia: CAD231SolitacaoOcorrencia[] = new Array();
  public url = 'http://localhost:53834/api/';
  constructor(private ocorrenciaService: CAD231SolicitacaoOcorrenciaService, private storage: Storage, private http: HttpClient) {



    this.http.get(this.url + 'CAD231/').subscribe(response => {
      for (let i = 0; i < Object.keys(response).length; i++) {
        this.ocorrencia.push({
          'idSolitacaoOcorrencia': response[i]['IdSolicitacaoOCorrencia'],
          'idProvedor': response[i]['IdProvedor'],
          'idStatusOcorrencia': response[i]['IdStatusOcorrencia'],
          'idTipoSolitacaoOcorrencia': response[i]['IdTipoSolicitacaoOcorrencia'],
          'dataCadastro': response[i]['DataCadastroSolicitacao'],
          'descricaoSolicitacao': response[i]['DescricaoSolicitacao'],
          'idUsuarioCadasro': response[i]['IdUsuarioCadastro'],
          'idCliente': response[i]['IdCliente']
        });
      }
    });
    console.log(this.ocorrencia);
    this.storage.set('ocorrencias',this.ocorrencia)

    storage.get('ocorrencias').then((val) => {
      console.log(val);
    });


  }
  ngOnInit() {

  }
}

"ocorrencia" 属性填写正确，

但是结果是空的，谁能解释一下为什么

现在是

here is the values of the "occurrence" property and the value returned by the "storage"

Answer 1

订阅方法正在用于 Observable。这意味着它会在对象更改时触发。对于这个例子，您从后端服务获取一些数据，您的程序将存储设置为 localstorage，而无需等待后端的响应。这就是我们使用 Observable 的原因。

要解决此问题，您必须在获得后端响应后设置存储，因此您必须在订阅中移动设置存储方法。 Here 是 Observables 的文档

this.http.get(this.url + 'CAD231/').subscribe(response => {
  for (let i = 0; i < Object.keys(response).length; i++) {
    this.ocorrencia.push({
      'idSolitacaoOcorrencia': response[i]['IdSolicitacaoOCorrencia'],
      'idProvedor': response[i]['IdProvedor'],
      'idStatusOcorrencia': response[i]['IdStatusOcorrencia'],
      'idTipoSolitacaoOcorrencia': response[i]['IdTipoSolicitacaoOcorrencia'],
      'dataCadastro': response[i]['DataCadastroSolicitacao'],
      'descricaoSolicitacao': response[i]['DescricaoSolicitacao'],
      'idUsuarioCadasro': response[i]['IdUsuarioCadastro'],
      'idCliente': response[i]['IdCliente']
    });
  }
  console.log(this.ocorrencia);
  this.storage.set('ocorrencias',this.ocorrencia)
  storage.get('ocorrencias').then((val) => {
  console.log(val);
    });
});

存储离子 4

Storage Ionic 4

angular

ionic4