我可以从Angular中填充JSON的表格，没有错误

Question

我正在阅读查询数据库，它可以完美地执行查询，因为我可以阅读控制台，JSON还可以，但表不足。

这是我的组件

@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);
  }

}

，这是我的conexion服务，

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

我看到了一些改进：

1. 您可以使用ViewChild从HTML获取元素，也许是您的学习目的。
2. 使服务方法返回可观察的，请勿在服务中订阅。
3. 为什么您具有IDNUM作为输入和const？根据我的看法，您正在尝试读取输入元素的值，以触发服务的读数。强制执行该字段是数字的，并使用2条绑定来设置idnum的值。
4. （单击）=“ Buscarenvio（）”触发操作，分配envios $ envioscomponent中的变量（envios $ = this.conexion.conexion.conexion.consultarenvio（idnum）< /代码>）。 envios $将是类型obervable＆lt; envio []＆gt;。之后，在HTML中使用envios $与异步管 - ＆gt; *ngfor =“让Envios $ | async的Envio”。
可能是更多建议，但我认为这是一开始的。

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

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

方法咨询返回承诺，因此您需要在异步方法的回调中设置变量。

您的代码应该看起来像：

Conexionservice：

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;
    });
  }