#javascript #angular
#javascript #angular
Вопрос:
У меня есть страница поиска в моем приложении Angular. Он ищет свойства (дом, квартиры и т. Д.). Пользователь выбирает свои критерии через форму, эта форма запускает функцию в моем компоненте, которая попадает в конечную точку из моего API через сервис.
Данные сохраняются в моем компоненте, и в настоящее время я регистрирую их в консоли.
Каков наилучший способ отображения результатов на странице.
Это страница поиска html.
<div class="container mt-4">
<div class="card">
<form [formGroup]="searchForm" (ngSubmit)="search()">
<div class="card-header">Search for a Property</div>
<div class="card-body">
<!-- County and Town Label-->
<div class="row">
<div class="col-md-6">
<label class="ml-1" for="county">County</label>
</div>
<div class="col-md-6">
<label for="town">Town</label>
</div>
</div>
<div class="row">
<!-- County Column -->
<div class="col-md-6">
<select class ="form-control" id="county" formControlName="county" >
<option *ngFor="let county of counties" [value]="county.value">
{{county.display}}
</option>
</select>
</div>
<div class="col-md-6">
<select class="form-control" formControlName="town">
<option *ngFor="let town of towns" [value]="town.value">
{{town.display}}
</option>
</select>
</div>
</div>
<!-- Bed and Bath Label-->
<div class="row mt-md-4">
<div class="col-md-3">
<label class="ml-1" for="min-bedrooms">Min Bed</label>
</div>
<div class="col-md-3">
<label for="max-bedrooms">Max Bed</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="min-bathrooms">Min Bath</label>
</div>
<div class="col-md-3">
<label for="max-bathrooms">Max Bath</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" formControlName="min_bedrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="max_bedrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="min_bathrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="min_bathrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-3">
<label class="ml-1" for="min-rent">Min Price</label>
</div>
<div class="col-md-3">
<label for="max-rent">Max Price</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="type">Selling Type</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="type">Property Type</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" formControlName="min_price">
<option *ngFor="let price of prices" [value]="price.value">
{{price.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="max_price">
<option *ngFor="let price of prices" [value]="price.value">
{{price.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="selling_type">
<option *ngFor="let type of sellingTypes" [value]="type.value">
{{type.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="property_type">
<option *ngFor="let type of propertytypes" [value]="type.value">
{{type.display}}
</option>
</select>
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-4">
<button type="submit" class="form-control btn btn-primary">
Search
</button>
</div>
</div>
</div>
</form>
</div>
</div>
Это компонент, связанный с HTML
export class PropertySearchComponent implements OnInit {
searchForm: FormGroup;
searchParams: any = {};
property: Property;
constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.createSearchForm();
}
createSearchForm() {
this.searchForm = this.formBuilder.group({
county: ['', Validators.nullValidator],
town: ['', Validators.nullValidator],
min_bedrooms: ['', Validators.nullValidator],
max_bedrooms: ['', Validators.nullValidator],
min_bathrooms: ['', Validators.nullValidator],
max_bathrooms: ['', Validators.nullValidator],
min_price: ['', Validators.nullValidator],
max_price: ['', Validators.nullValidator],
selling_type: ['', Validators.nullValidator],
property_type: ['', Validators.nullValidator],
});
}
search() {
this.searchParams.county = (Object.assign({}, this.searchForm.value));
this.advertService.propertySearch(this.searchParams).subscribe(data => {
this.property = data;
console.log(this.property);
}, error => {
console.log(error);
});
}
В функции search() над свойством результаты поиска сохраняются в this.property .
Это функция в моем сервисе, которая вызывается из компонента.
propertySearch(model: any): Observable<Property> {
return this.http.post<Property>(environment.apiUrl 'search', model);
}
Как мне следует отображать результаты, сохраненные в this.property .
Комментарии:
1. Итак, ваш вопрос сводится к «как мне отобразить массив объектов?», Я полагаю. Просто используйте другой
ngForцикл, как вы уже делаете.2. Могу ли я сделать это на той же HTML-странице, что и моя форма поиска?
3. @ChrisG Спасибо. Теперь я чувствую себя глупо. Это было так очевидно
4. Не чувствуйте себя глупо, все были там, где вы есть 🙂
Ответ №1:
Вам нужно добавить таблицу, содержащую ваши поля.
И отображать так, я предполагаю, что ваша переменная свойства имеет следующие id, имя, адрес электронной почты, веб-сайт.
<table class="table table-striped">
<thead>
<tr>
<th style="width: 20%">
ID
</th>
<th style="width: 50%">
Name
</th>
<th style="width: 10%">
Email
</th>
<th style="width: 20%">
Website
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of property">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.website}}</td>
</tr>
</tbody>
</table>