タイトルで述べたように、
search
を実行したい角度4で機能します。SpringBootバックエンドにRESTサービスがあり、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>
上記のコードでは、探す ブラウザのボタンをクリックすると、次のエラーが返されます。
エラーエラー:キャッチされていません(約束中):ステータスの応答:302 URLのOK:http:// localhost:8080/evenement/evenements/degustation eclipseターミナルでは、探している行が表示されるという事実にもかかわらず。だから私は問題が実際にAngularにあると思うが、どこで正確にわからないのか。
誰かがこれを理解するのを助けることができますか?ありがとう
回答 1 件
関連記事
- Visual Studio CodeのすべてのドキュメントでPHP関数を検索する方法はありますか?
- 角度のTypeScriptエラー:宣言された型が「void」でも「any」でもない関数は、値を返す必要があります
- 各サブアレイの最小値を検索する関数
- Datatable検索機能は複数の値でテーブルをフィルタリングしません
- Angular ngForがDOMに要素を作成するときに、関数を実行するにはどうすればよいですか?
- Animejsのコールバック関数内のAngularコンポーネントのプロパティ/関数にアクセスします
- 辞書で単語を検索する機能
- ランダムユーザーAPIの検索機能が機能しないのはなぜですか?
- データセット内の潜在的に死亡した個人を検索するR関数
次のようにコードを変更できることを約束する必要はありません。
サービス
成分