Как выполнить функцию поиска в угловых 4? - PullRequest
Новая
       9

Как выполнить функцию поиска в угловых 4?

0 голосов
/ 25 мая 2018

Как упомянуто в названии, я хочу выполнить функцию search в угловом формате 4. У меня есть служба REST в бэкэнде SpringBoot, и я назвал ее в Postman, и она прекрасно работает, но во внешнем интерфейсеугловой это не так.

Мой код в Service.TS

@Injectable()
export class EvenementService {

  private evensUrl_del = 'http://localhost:8080/evenement';
  private headers = new Headers({ 'Content-Type': 'application/json' });
  private options = new RequestOptions({ headers: this.headers });

  constructor(private http: Http) { }

  // Get all events
  getEvenement(): Promise<Evenement[]> {
    return this.http.get(this.evensUrl)
      .toPromise()
      .then(response => response.json() as Evenement[])
      .catch(this.handleError);
  }

  getEvenementByType(typeE: string): Promise<Evenement[]> {
return this.http.get(this.evensUrl_del + '/evenements/' + typeE, this.options)
  .toPromise()
  .then(response => response.json() as Evenement)
  .catch(this.handleError);

}}

Мой Component.TS

@Component({
  selector: 'app-evenement',
  templateUrl: './evenement.component.html',
  styleUrls: ['./evenement.component.css']
})
export class EvenementComponent implements OnInit {
  events: Evenement = new Evenement();
  evenmt: Evenement[];
  //e: Evenement[];

  typeE: string;

  constructor(public router: Router, private modalService: NgbModal, private evenementService: EvenementService, private toastyService: ToastyService) { }

  ngOnInit(): void {
    this.typeE="";
    //this.getEvenements();
  }

  ver(events: Evenement, modal) {
    evenmt => this.evenmt = evenmt;
    this.modalService.open(modal, { size: 'lg' });
  }

  searchEvenement(){
    this.evenementService.getEvenementByType(this.typeE).then(evenmt => this.evenmt = evenmt);
  }

  getEvenements() {
    this.evenementService.getEvenement().then(evenmt => this.evenmt = evenmt);
  }
}

Наконец-тоcomponent.html

<div style="width: 300px;">
            <div class="form-group">
                <label for="typeE"><b>Type</b></label>
                <input type="text" class="form-control" id="typeE" name="typeE" [(ngModel)]="typeE" required>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-success" (click)="searchEvenement()">Rechercher</button>
            </div>
    </div>
    <ul>
        <li *ngFor="let e of evenmt">
            <h4>{{e.typeE}} - {{e.prixE}} {{e.dateE}}</h4>
        </li>
    </ul>

С кодом выше, когда я нажимаю кнопку Поиск в браузере, он возвращает следующую ошибку:

Ошибка ОШИБКИ: Uncaught (в обещании): Ответ со статусом: 302 OK для URL: http://localhost:8080/evenement/evenements/degustation, несмотря на тот факт, что в терминале затмения отображается строка, которую я ищу.Так что я думаю, что проблема на самом деле в Angular, но я не знаю, где именно.

Может кто-нибудь помочь мне разобраться в этом?Спасибо

1 Ответ

0 голосов
/ 25 мая 2018

Не нужно обещать, что вы можете изменить код как:

сервис 

@Injectable()
export class EvenementService {

    private evensUrl_del = 'http://localhost:8080/evenement';
    private headers = new Headers({ 'Content-Type': 'application/json' });
    private options = new RequestOptions({ headers: this.headers });

    constructor(private http: Http) { }

    // Get all events
    getEvenement(): Promise<Evenement[]> {
        return this.http.get(this.evensUrl)
                    .map(res => res.json())
                    .catch((err) => this.handleError(err));
    }

    getEvenementByType(typeE: string): Promise<Evenement[]> {
        return this.http.get(`${this.evensUrl_del}/evenements/${typeE}`, this.options)
                        .map(res => res.json())
                        .catch((err) => this.handleError(err));
    } 
}

компонент 

searchEvenement(){
    this.evenementService.getEvenementByType(this.typeE).subscribe(evenmt => {
        setTimeout(() => { <====== You can use timeout
            this.evenmt = evenmt;
        });
    });
}

getEvenements() {
    this.evenementService.getEvenement().subscribe(evenmt => this.evenmt = evenmt);
}
...