Question

两个问题！

有没有办法让我在页面加载后立即从服务中显示所有值。当前，我首先必须在搜索字段中单击并开始输入内容以显示值。我已经尝试过startWith('')，但它给了我这个错误：

src / app / computer-view / computer-view.component.ts（39,4）中的
ERROR：错误 TS2322：无法将类型“可观察<{}>”分配给该类型 “可观察”。类型“ {}”不可分配给类型 'ComputerInfo []'。类型“ {}”中缺少属性“包含”。

我还使用.filter和.includes来过滤数组，它可以匹配数组中的code或name元素。当找到元素时，它将返回一个数组，该数组的值被评估为true，这就是我想要的。但我也想知道是否有可能取回与包含项匹配的实际值，以便将其绑定到另一个html元素。换句话说，要显示完全匹配的内容（名称或代码），我想将其绑定到显示序列号的位置。谢谢

import { CasperComputersService } from '../services/casper-computers.service';
import { Component, OnInit } from '@angular/core';
import {Subscription,Observable, BehaviorSubject} from 'rxjs';
import {
  map,
  withLatestFrom,
  debounceTime,
  startWith
} from "rxjs/operators";
import { ComputerInfo } from './../models/computer-info';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-computer-view',
  templateUrl: './computer-view.component.html',
  styleUrls: ['./computer-view.component.css']
})
export class ComputerViewComponent implements OnInit {

computerSearchForm: FormGroup;

computers: ComputerInfo[]= [];
compSub: Subscription;
private computerSubj = new BehaviorSubject(this.computers);
computerSearch: Observable<ComputerInfo[]>;
  constructor(public computerService: CasperComputersService,
  private fb: FormBuilder) { }

  ngOnInit() {
    this.computerSearchForm=this.fb.group({
      computerSearch: ''
    });
   this.computerService.getGeneralComputers();
   this.compSub = this.computerService.getComputerUpdateListener()
   .subscribe(comp=>{
     this.computers = comp;
     this.computerSubj.next([...this.computers]);
   });
   this.computerSearch = this.inputChange("computerSearch");
  }
  private inputChange(control: string) {
    return this.computerSearchForm.get(control).valueChanges.pipe(
      withLatestFrom(this.computerSubj),
      debounceTime(500),
      map(x => {
        return this._filter(x);
      })
    );
  }

  private _filter(term): ComputerInfo[] {
    if (term[0] === ''){return term[1].map(option=>{return option})};
    const filterValue: string = term[0].toString().trim(' ').toLowerCase();
    return term[1].filter(option =>
      option.id.toString().trim(' ').toLowerCase().includes(filterValue) || option.name.toLowerCase().trim(' ').includes(filterValue)
    );
  }


}

<mat-card>
<form [formGroup]="computerSearchForm">
    <mat-form-field>
        <input  mat-raised type="text" id="computerSearch" name="computerSearch" matInput formControlName="computerSearch">
      </mat-form-field>
      </form>
  <ul *ngFor="let computer of computerSearch|async">

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{computer.name}}

      </mat-panel-title>
      <mat-panel-description style="text-align: center">
        <p>{{computer.serial_number}}</p>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <p>{{computer.id}}</p>
    <p>{{computer.serial_number}}</p>
    <p>{{computer.udid}}</p>
    <p>{{computer.mac_address}}</p>

  </mat-expansion-panel>
</ul>


</mat-card>

页面加载后立即启动自动完成服务

0 个答案: