我正在閱讀我的資料庫的查詢，它完美地執行了查詢，因為我可以通過控制臺讀取 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);
}
}
這是我的連接服務
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
uj5u.com熱心網友回復：
您沒有為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);
}
}
uj5u.com熱心網友回復：
問題是您沒有設定envios用于顯示資料的變數（根據您的html）。
該方法consultarEnvio回傳一個承諾，因此您需要在異步方法的回呼中設定變數。
您的代碼應如下所示：
連接服務：
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;
});
}
uj5u.com熱心網友回復：
我看到了一些改進：
- 您可以使用 ViewChild 從 html 中獲取元素，也許只是作為您的學習目的。
- 使服務方法回傳一個可觀察的，不要訂閱服務。
- 為什么你有'idnum'作為輸入和一個常量？據我所知，您正在嘗試讀取輸入元素的值，基于該值觸發從服務中讀取。強制欄位為數字，使用2方式系結設定idnum的值。
- 當觸發 (click)="buscarEnvio()" 動作時，在 EnviosComponent 中分配 envios$ 變數（ envios$ = this.conexion.consultarEnvio(idnum) ）。'envios$' 將是 Obervable<Envio[]> 型別。之后，在帶有異步管道的 html 中使用 envios$ --> *ngFor="let envios$ | async"。可能是更多的建議，但我認為這是一個開始。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/476924.html