如何显示搜索结果

时间:2019-04-11 10:25:52

标签: 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()函数中,搜索结果保存在此属性中。

这是我在服务中从组件调用的函数。

 propertySearch(model: any): Observable<Property> {
    return this.http.post<Property>(environment.apiUrl + 'search', model);
  }

我应该如何显示保存在此属性中的结果。

1 个答案:

答案 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>