javascript - 如何显示搜索结果

问题描述

我的 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 中的结果。

标签： javascriptangular

javascript - 如何显示搜索结果

问题描述

解决方案

推荐阅读