Не могу заполнить таблицу из JSON в angular и ошибки нет

Я читаю через запрос к моей базе данных, он отлично выполняет запрос, потому что я могу читать через консоль, 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 ОК

Где вы устанавливаете envios..?

MikeOne 17.05.2022 19:58

Привет, мой компонент envios, envios: Envio[];

Netbeans Noob 17.05.2022 20:01

Поместите строку в OP, где вы устанавливаете переменную envios. Вам нужно установить его в методе consultarEnvio

Brank Victoria 17.05.2022 20:03

Я добавил envio : Envio[]; в начале класса conexion.service (там, где consultarEnvio) есть, но все равно не работает

Netbeans Noob 17.05.2022 20:05

Это просто набор текста. Вам нужно вернуть this.http.get<Envio[]>(path).subscribe(envio => { console.log(envio); this.envios = envio; });;

MikeOne 17.05.2022 20:18
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
5
55
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проблема в том, что вы не устанавливаете свою переменную envios, которая используется для отображения данных (согласно вашему html).

Метод consultarEnvio возвращает обещание, поэтому вам нужно установить свою переменную в обратном вызове вашего асинхронного метода.

Ваш код должен выглядеть так:

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

Он на самом деле возвращает подписку.. Боюсь, это не сработает..

MikeOne 17.05.2022 20:19

@MikeOne, вы совершенно правы, это должно сработать, если он использует «тогда» вместо «подписаться», не так ли?

Brank Victoria 17.05.2022 20:22

.. Я.. не думаю? Разве я что-то упускаю, я нигде не вижу обещания? Может быть, я вас неправильно понимаю?

MikeOne 17.05.2022 22:56
Ответ принят как подходящий

Вы не назначаете никакого ответа массиву 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);
  }
}

Привет, я буквально скопировал это из вашего ответа, и он все еще не работает, я проверил консоль, и JSON все еще в порядке :(

Netbeans Noob 17.05.2022 20:35

@NetbeansNoob: смотрите мой обновленный ответ. Вам нужно изменить способ подписки на данные.

Pavan Jadda 17.05.2022 20:42

я пробовал это, но я получаю эту ошибку, когда он компилирует ОШИБКУ в src/app/envios/envios.component.ts(31,54): ошибка TS2551: свойство «подписаться» не существует для типа «Подписка». Вы имели в виду "отписаться"?

Netbeans Noob 17.05.2022 20:47

Нет. Вы также должны обновить Сервис. Смотрите мой код

Pavan Jadda 17.05.2022 20:55

Паван ты лучший.

Netbeans Noob 17.05.2022 21:01

Спасибо тебе за все, ты настоящий MVP

Netbeans Noob 17.05.2022 21:01

@NetbeansNoob: обязательно отметьте это как ответ, это поможет другим, кто находится в похожей лодке.

Pavan Jadda 17.05.2022 21:22

Я вижу пару улучшений:

  1. Вы можете использовать ViewChild для получения элемента из html, возможно, просто в качестве цели обучения для вас.
  2. Заставьте метод службы возвращать наблюдаемое, не подписывайтесь на службу.
  3. Почему у вас есть «idnum» как в качестве входных данных, так и в качестве константы? Из того, что я вижу, вы пытаетесь прочитать значение элемента ввода, на основе которого инициировать чтение из службы. Сделайте поле числовым, используйте двухстороннюю привязку, чтобы установить значение idnum.
  4. Когда запускается действие (click)="buscarEnvio()", назначьте переменную envios$ в EnviosComponent ( envios$ = this.conexion.consultarEnvio(idnum) ). 'envios$' будет иметь тип Obervable<Envio[]>. После этого используйте envios$ в html с асинхронным каналом --> *ngFor="let envio of envios$ | async". Можно было бы еще советов, но я думаю, что это то, с чего стоит начать.

Другие вопросы по теме