我无法在 angular 中从 JSON 填写 table 并且没有错误

Question

我正在通过查询读取我的数据库，它完美地执行了查询，因为我可以通过控制台读取 JSON 没问题，但 table 没有填充。

这是我的组件

@Component({
  selector: 'app-envios',
  templateUrl: './envios.component.html',
  styleUrls: ['./envios.component.css']
})
export class EnviosComponent {

  constructor(private conexion: ConexionService) {}
  envios: Envio[];
  @Input() idnum: number




  ngOnInit() {
  }

  buscarEnvio()
  {
    const idnum = parseInt((document.getElementById('idenvio')as HTMLInputElement).value);
    console.log(idnum);
    this.conexion.consultarEnvio(idnum);
  }

}

这是我的连接服务

export class ConexionService {
   envio : Envio[];

  private api = 'http://localhost:8080/ProyectoFinal/webapi';
 consultarEnvio(id: Number)
  {
    const path = `${this.api}/estadoenvio/${id}`;
    return this.http.get<Envio[]>(path).subscribe(envio => {
      console.log(envio);
    });;
  }

}

这是HTML

<div class="container-fluid">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="CC" id="idenvio">
    <span class="input-group-btn">
      <button type="submit" class="btn btn-danger" type="button" (click)="buscarEnvio()">Buscar</button>
    </span>
  </div>
  <br>
  <div class="col" id="tabla">
    <table class="table table-border">
      <thead>
        <tr class="table-danger">
          <th scope="col">Id del envío</th>
          <th scope="col">Nombre del destinatario</th>
          <th scope="col">Dirreción de envío</th>
          <th scope="col">Código Postal</th>
          <th scope="col">Intentos de entrega</th>
          <th scope="col">Estado del envio</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-danger" *ngFor="let envio of envios">

          <td class="table-danger">{{envio.idEnvio}}</td>
          <td class="table-danger">{{envio.nombreDestinatario}}</td>
          <td class="table-danger">{{envio.direccionCompleta}}</td>
          <td class="table-danger">{{envio.codigoPostal}}</td>
          <td class="table-danger">{{envio.numIntentosEntrega}}</td>
          <td class="table-danger">{{envio.idEstadoEnvio}}</td>
        </tr>
      </tbody>
    </table>


  </div>
</div>

如果你需要，这是界面

export interface Envio
{
    idEnvio : number;
    nombreDestinatario: string;
    DNINIF: string;
    codigoPostal: string;
    direccionCompleta:string;
    idEstadoEnvio: string;
    numIntentosEntrega: number;

    

}

如果我调试我可以看到 Json 是正确的 JSON OK

Answer 1

问题是您没有设置用于显示数据的变量 envios（根据您的 html）。

方法 consultarEnvio returns 一个承诺，因此您需要在异步方法的回调中设置变量。

您的代码应如下所示：

连接服务：

export class ConexionService {
   envio : Envio[];

  private api = 'http://localhost:8080/ProyectoFinal/webapi';
 consultarEnvio(id: Number)
  {
    const path = `${this.api}/estadoenvio/${id}`;
    return this.http.get<Envio[]>(path).then(envio => {
      return envio;
    });
  }

}

组件：

@Component({
  selector: 'app-envios',
  templateUrl: './envios.component.html',
  styleUrls: ['./envios.component.css']
})
export class EnviosComponent {

  constructor(private conexion: ConexionService) {}
  envios: Envio[];
  @Input() idnum: number




  ngOnInit() {
  }

  buscarEnvio()
  {
    const idnum = parseInt((document.getElementById('idenvio')as HTMLInputElement).value);
    console.log(idnum);
    this.conexion.consultarEnvio(idnum).then((envioResult) => {
       this.envios = envioResult;
    });
  }

}
 buscarEnvio()
  {
    const idnum = parseInt((document.getElementById('idenvio')as HTMLInputElement).value);
    console.log(idnum);
    this.conexion.consultarEnvio(idnum).then((envioResult) => {
       this.envios = envioResult;
    });
  }

Answer 2

您没有为 envio 数组分配任何响应。在 subscribe() 中，将响应分配给 envio

更新的组件：

@Component({
  selector: 'app-envios',
  templateUrl: './envios.component.html',
  styleUrls: ['./envios.component.css']
})
export class EnviosComponent {

  constructor(private conexion: ConexionService) {}
  envios: Envio[];
  @Input() idnum: number

  ngOnInit() {
  }

  buscarEnvio()
  {
    const idnum = parseInt((document.getElementById('idenvio')as HTMLInputElement).value);
    console.log(idnum);
this.conexion.consultarEnvio(idnum).subscribe(data=>{
    this.envios=data;
   }
  }

}

更新服务：

export class ConexionService {
  private api = 'http://localhost:8080/ProyectoFinal/webapi';
 consultarEnvio(id: Number)
  {
    const path = `${this.api}/estadoenvio/${id}`;
    return this.http.get<Envio[]>(path);
  }
}

Answer 3

我看到了一些改进：

您可以使用 ViewChild 从 HTML 获取元素，也许只是作为您的学习目的。
使服务方法return成为可观察的，不要在服务中订阅。
为什么 idnum 既作为输入又作为常量？据我所知，您正在尝试读取输入元素的值，并根据该值触发从服务中读取数据。强制字段为数字，并使用2向绑定设置idnum.
当触发(click)="buscarEnvio()"动作时，在EnviosComponent（envios$ = this.conexion.consultarEnvio(idnum)）中分配envios$变量。 envios$ 将是 Obervable<Envio[]> 类型。然后，在 html 中使用 envios$ 和异步管道 --> *ngFor="let envio of envios$ | async"。可能会有更多的建议，但我认为这是一个开始。

我无法在 angular 中从 JSON 填写 table 并且没有错误

I can't fill a table from JSON in angular and there is no error

html

json

ngfor

angular