角6，根据选定的值，从get调用获取过滤数据，而不需要管道。

Question

我使用的是角6和ASP.NET Core2.0，分别构建。我有一个HTTP调用，它将位置列表返回给下拉列表。我希望筛选TeacherName选项/下拉列表，以只显示与下拉列表中选择的位置相等的名称(在后端SQL数据库中)。浏览器上的错误说..。TypeError:无法读取未定义的属性“筛选器”

因此，我不认为在"filterTeachers“函数中语法是正确的，但是它可能是其他的(?)这些类型的客户端过滤可以不使用管道吗？应该在后端作为linq查询来执行吗？

这是update.component.html..。

<div>
  <form>  
<div class="form-group">
  <label for="LogLocation-input">Select Your Location </label>
  <select type="text" id="LogLocation" name="LogLocation-input" [(ngModel)]="teacherLocInput" (ngModelChange)="basedOnLoc($event)" class="form-control"> 
<option *ngFor="let loc of teacherLocationsData" [value]="loc.location">
  {{ loc.location }}
</option>
  </select>
</div>

<div class="form-group">
  <label for="TeacherName-input">Enter Teacher Name </label>
  <select type="text" id="TeacherName" name="TeacherName-input" [(ngModel)]="loggingInfo.ClassTimesTeacherName" class="form-control">
    <option *ngFor="let nam of filteredTeacherNames"> 
      {{ nam.name }}
    </option>  
  </select>
</div>


      <button type="button" class="btn btn-primary" (click)="addOrUpdateLoggingRecord($event);">Save</button>

      <h2 *ngIf="!loggingInfo || loggingInfo.id === undefined">Add record</h2>

      <h2 *ngIf="loggingInfo && loggingInfo.id !== undefined">Update record (ID: )</h2>

  </form>
 </div>

这是update.component.ts..。

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { TimeService } from '../time.service';


@Component({
  selector: 'app-update',
  templateUrl: './update.component.html',
  styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
  @Output() loggingCreated = new EventEmitter<any>();
  @Input() loggingInfo: any;
  public buttonText = 'Save';
  public teacherLocationsData: Array<any>;   
  public teacherNameData: Array<any>;
  public filteredTeacherNames: Array<any>;

  private _teacherLocInput: string;
  get teacherLocInput(): string {
    return this._teacherLocInput;
  }
  set teacherLocInput(value: string) {
  this._teacherLocInput = value;
  this.filteredTeacherNames = this.filterTeachers(value);
}

filterTeachers(teacherLocInput: string) {
  return this.teacherNameData.filter(teacher => teacher.location === this.teacherLocInput);
}


  constructor(private timeService: TimeService) { 
    this.clearAllInfo();
    timeService.getTeacherLocation().subscribe((importLocations: any) => this.teacherLocationsData = importLocations);   
 }

  ngOnInit() {
    // not sure if needed
    this.teacherNameData;

  }

basedOnLoc(val:any) {
  // not sure if this is calling API
this.customFunction(val);
}

// gets called on the change event of location selected
customFunction(val:any) {
  this.teacherLocInput = val; 
  this.timeService.getTeacherName().subscribe((importTeacherName: any) => this.teacherNameData = importTeacherName);  
}



  private clearAllInfo = function() {
    // Create an empty logging object
    this.loggingInfo = {
      id: undefined,
      date: '',
      ClassTimesStudentID: '',
      ClassTimesStudentName:'',
      ClassTimesSubjects: '',
      ClassTimesLogLocation: '',
      ClassTimesTeacherID: '',
      ClassTimesTeacherName: '',
      ClassTimesLogOff: '',
      timeInSeconds: 0,
      distanceInMeters: 0
    };
  };

  public addOrUpdateLoggingRecord = function(event) {
    this.loggingCreated.emit(this.loggingInfo);
    this.clearAllInfo();
    console.log(this.LoggingIfo);
  };


}

这是使用角反应形式的新版本..。

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { TimeService } from '../time.service';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';


@Component({
  selector: 'app-update',
  templateUrl: './update.component.html',
  styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
  timeLogForm: FormGroup;

  @Output() loggingCreated = new EventEmitter<any>();
  @Input() loggingInfo: any;
  public buttonText = 'Save';

  public teacherLocationsData: Array<any>;
  public teacherNameData: Array<any>;
  public filteredTeacherNames: Array<any>;

  get filterTeachers() {
    return this.teacherNameData.filter(teacher => teacher.location === this.timeLogForm.controls.location.value);
  }
 constructor(private timeService: TimeService, private fb: FormBuilder) { 
    timeService.getTeacherLocation().subscribe((importLocations: any) => this.teacherLocationsData = importLocations);
    timeService.getTeacherName().subscribe((importTeacherName: any) => this.teacherNameData = importTeacherName);
  }

  ngOnInit() { 
    this.buildForm();
  }

  buildForm() {
    this.timeLogForm = this.fb.group({
      id: null,

      ClassTimesLogLocation: null,
      ClassTimesTeacherName: null,

    });
  }
 public addOrUpdateLoggingRecord = function(event) {
    this.loggingCreated.emit(this.loggingInfo);
  };


}

这是反应性表单模板..。

<div>
  <form [formGroup]="timeLogForm">
div class="form-group">
  <label for="LogLocation-input">Select Your Location </label>
  <select type="text" id="LogLocation" name="LogLocation-input" formGroupName="ClassTimesLogLocation" class="form-control"> 
<option *ngFor="let loc of teacherLocationsData" [value]="loc.location">
  {{ loc.location }}
</option>
  </select>
</div>

<div class="form-group">
  <label for="TeacherName-input">Enter Teacher Name </label>
  <select type="text" id="TeacherName" name="TeacherName-input" formGroupName="ClassTimesTeacherName" class="form-control">
    <option *ngFor="let nam of filteredTeacherNames" [value]="nam.name" > 
      {{ nam.name }}
    </option>  
  </select>
</div>      <button type="button" class="btn btn-primary" (click)="addOrUpdateLoggingRecord($event);">Save</button>

      <h2 *ngIf="!loggingInfo || loggingInfo.id === undefined">Add record</h2>

      <h2 *ngIf="loggingInfo && loggingInfo.id !== undefined">Update record (id: )</h2>

  </form>
 </div>

Answer 1

首先，很多逻辑都可以用角的ReactiveForms来简化。https://angular.io/guide/reactive-forms，老实说，这是我最喜欢的角度之一。它使类成为表单而不是模板的唯一真实来源。不管怎么说关于你的问题。您可以使用getter作为在*ngFor中迭代的数组。它将在更改时运行该方法，因此它将为您处理该方法。

在您的.ts文件中：

get filterTeachers() {
  return this.teacherNameData.filter(teacher => teacher.location === this.teacherLocInput);
}

html：

<option *ngFor="let nam of filterTeachers"> 
  {{ nam.name }}
</option>  

如果您对ReactiveForms感兴趣：

component.ts (当然，丢失了您已经需要的大量数据)：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';


@Component({
  selector: 'selector-name',
  styleUrls: ['selector-name.component.scss'],
  template: `something.html `
})
export class SomeComponent implements OnInit {

  teacherLocationForm: FormGroup;

  get filterTeachers() {
    return this.teacherNameData.filter(teacher => teacher.location === this.teacherLocationForm.controls.location.value);
  }

  constructor (private fb: FormBuilder) {}

  ngOnInit() {
    this.buildForm();
  }

  buildForm() {
    this.teacherLocationForm = this.fb.group({
      location: null,
      teacher: null
    });
  }


}

HTML：

<div>
  <form [formGroup]="teacherLocationForm">  
<div class="form-group">
  <label for="LogLocation-input">Select Your Location </label>
  <select type="text" id="LogLocation" name="LogLocation-input" formGroupName="location" class="form-control"> 
<option *ngFor="let loc of teacherLocationsData" [value]="loc.location">
  {{ loc.location }}
</option>
  </select>
</div>

<div class="form-group">
  <label for="TeacherName-input">Enter Teacher Name </label>
  <select type="text" id="TeacherName" name="TeacherName-input" formGroupName="teacher" class="form-control">
    <option *ngFor="let nam of filterTeachers"> 
      {{ nam.name }}
    </option>  
  </select>
</div>


      <button type="button" class="btn btn-primary" (click)="addOrUpdateLoggingRecord($event);">Save</button>

      <h2 *ngIf="!loggingInfo || loggingInfo.id === undefined">Add record</h2>

      <h2 *ngIf="loggingInfo && loggingInfo.id !== undefined">Update record (ID: )</h2>

  </form>

然后将值更新到该teacherLocationForm属性中。您可以使用this.teacherLocationForm.value访问它们。表单组非常强大，可以保存表单的状态、错误，并且很容易提交。