我在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（）函数中，搜索结果保存在此属性中。
这是我在服务中从组件调用的函数。
propertySearch(model: any): Observable<Property> {
return this.http.post<Property>(environment.apiUrl + 'search', model);
}
我应该如何显示保存在此属性中的结果。
答案 0 :(得分：0)
您需要添加一个包含您的字段的表。
这样显示，我假设您的媒体资源变量具有这些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>