Fatal编程技术网
  • angular/
  • Angular 添加路由后，应用程序出现错误

Angular 添加路由后，应用程序出现错误

angular

Angular 添加路由后，应用程序出现错误,angular,angular2-forms,angular-router,angular-pipe,Angular,Angular2 Forms,Angular Router,Angular Pipe,应用程序出现以下错误。在filter.pipe.ts中找不到值属性 我已经提供了所有的价值观，但它似乎仍然不起作用。我无法准确指出是什么导致了这个错误 ListComponent.html:11 ERROR TypeError: Cannot read property 'length' of undefined at FilterPipe.webpackJsonp.../../../../../src/app/filter.pipe.ts.FilterPipe.transform (f

应用程序出现以下错误。在filter.pipe.ts中找不到
值
属性

我已经提供了所有的价值观，但它似乎仍然不起作用。我无法准确指出是什么导致了这个错误

ListComponent.html:11 ERROR TypeError: Cannot read property 'length' of undefined
    at FilterPipe.webpackJsonp.../../../../../src/app/filter.pipe.ts.FilterPipe.transform (filter.pipe.ts:12)
    at Object.eval [as updateDirectives] (ListComponent.html:16)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13093)
    at checkAndUpdateView (core.es5.js:12270)
    at callViewAction (core.es5.js:12638)
    at execComponentViewsAction (core.es5.js:12570)
    at checkAndUpdateView (core.es5.js:12276)
    at callViewAction (core.es5.js:12638)
    at execEmbeddedViewsAction (core.es5.js:12596)
    at checkAndUpdateView (core.es5.js:12271)

(filter.pipe.ts:12)>>>>>>
 if (value.length === 0 || !filterString || !propName) {

(List.component.html:16)>>>>>>>
 <li class="list-group-item" *ngFor="let person of personsList | filter:coursestat:'chosenCourse'">
//registration.component.html

<!-- Form with three inputs and one dropdown which intializes with data from service on intialization and validates with min and maxlength-->
<section class="container">
  <!-- ngSubmit calls the function onSubmit on submitting the form  -->
  <form class="form-horizontal" (ngSubmit)='onSubmit()' [formGroup]='courseForm'>
    <div class="form-group">
      <label for="inputUsername" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputUsername" placeholder="Username" formControlName="username" name="name"
          [ngClass]="{inValid: !courseForm.get('username').valid && courseForm.get('username').touched, valid: courseForm.get('username').valid && courseForm.get('username').touched}">
        <span class="help-block" *ngIf="!courseForm.get('username').valid && courseForm.get('username').touched">Please enter a valid username</span>
      </div>
    </div>
    <!-- username input ends here -->
    <div class="form-group">
      <label for="inputEmail" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <!-- CSS class applied based on validation -->
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" formControlName="email" name="email" [ngClass]="{inValid: !courseForm.get('email').valid && courseForm.get('email').touched, valid: courseForm.get('email').valid && courseForm.get('email').touched}">
        <span class="help-block" *ngIf="!courseForm.get('email').valid && courseForm.get('email').touched">Please Enter a valid email</span>
      </div>
    </div>
    <!-- email input ends here -->
    <div class="form-group">
      <label for="inputAddress" class="col-sm-2 control-label">Address</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputAddress" placeholder="Your Address" formControlName="address" name="address"
          [ngClass]="{inValid: !courseForm.get('address').valid && courseForm.get('address').touched, valid: courseForm.get('address').valid && courseForm.get('address').touched}">
        <!--Display error message on MinLength and MaxLength Validation-->
        <span class="help-block" *ngIf="courseForm.get('address')?.errors?.required && courseForm.get('address').touched">Please Enter Your Address</span>
        <span class="help-block" *ngIf="(courseForm.get('address')?.errors?.minlength?.requiredLength !== courseForm.get('address')?.errors?.minlength?.actualLength) && courseForm.get('address')?.touched">Address should be at least 10 characters long</span>
      </div>
    </div>
    <!-- address input ends here -->
    <div class="form-group">
      <label for="inputDate" class="col-sm-2 control-label">DOB</label>
      <div class="col-sm-10">
        <input type="date" class="form-control" id="inputDate" placeholder="DOB" formControlName="date" name="date" [ngClass]="{inValid: !courseForm.get('date').valid && courseForm.get('date').touched, valid: courseForm.get('date').valid && courseForm.get('date').touched}">
        <!--Display error message on MinLength and MaxLength Validation-->
        <span class="help-block" *ngIf="courseForm.get('date')?.errors?.required && courseForm.get('date').touched">Please Enter a valid Date-of-Birth</span>
        <!-- <span class="help-block" *ngIf="(courseForm.get('date')?.errors?.minlength?.requiredLength !== courseForm.get('date')?.errors?.minlength?.actualLength) && courseForm.get('date')?.touched">Please enter a valid DOB</span> -->
      </div>
    </div>
    <!-- date input ends here -->
    <div class="form-group">
      <label for="sel1" class="col-sm-2 control-label">Choose Course</label>
      <div class="col-sm-10">
        <select class="form-control" id="sel1" formControlName="select" [(ngModel)]="selectedOption" name="select" [ngClass]="{inValid: !courseForm.get('select').valid && courseForm.get('select').touched, valid: courseForm.get('select').valid && courseForm.get('select').touched}">
          <option [value]="selectedOption" [disabled]="true">Choose Your Course</option>
          <option *ngFor="let data of dropDownArr; index as i"  [ngValue]="data.course">{{data.course}}</option>          
        </select>
        <span class="help-block" *ngIf="!courseForm.get('select').valid && courseForm.get('select').touched">Please choose a Course</span>
      </div>
    </div>
    <!-- select input ends here -->
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" [disabled]=!courseForm.valid>Submit</button>
        <button type="button" class="btn btn-default" (click)="resetForm(f)">Reset</button>
      </div>
    </div>
    <!-- submit and reset buttons ends here -->
  </form>
  <!-- form ends here -->
</section>
<app-list [coursestat]="courseStat" [personsList]="personsList"></app-list>

<section class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Registered users</div>
    <!-- search box input -->
    <input type="text" [(ngModel)]='coursestat' size="40" placeholder="filter based on course: e.g Web Development">

    <!-- List group -->
    <ul class="list-group">
      <!-- pipes transforms the username's first word by capitalize it-->
      <li class="list-group-item" *ngFor="let person of personsList | filter:coursestat:'chosenCourse'">username:&nbsp;&nbsp;{{person.name | capitalize}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; email:&nbsp;&nbsp;{{person.email}}
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; DOB: &nbsp;&nbsp;{{person.date | date: 'd/M/y'}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Address:
        &nbsp;&nbsp;{{person.address}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; Course Chosen: &nbsp;&nbsp;{{person.chosenCourse
        | uppercase}}</li>
    </ul>
  </div>
</section>
//list.component.html

<!-- Form with three inputs and one dropdown which intializes with data from service on intialization and validates with min and maxlength-->
<section class="container">
  <!-- ngSubmit calls the function onSubmit on submitting the form  -->
  <form class="form-horizontal" (ngSubmit)='onSubmit()' [formGroup]='courseForm'>
    <div class="form-group">
      <label for="inputUsername" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputUsername" placeholder="Username" formControlName="username" name="name"
          [ngClass]="{inValid: !courseForm.get('username').valid && courseForm.get('username').touched, valid: courseForm.get('username').valid && courseForm.get('username').touched}">
        <span class="help-block" *ngIf="!courseForm.get('username').valid && courseForm.get('username').touched">Please enter a valid username</span>
      </div>
    </div>
    <!-- username input ends here -->
    <div class="form-group">
      <label for="inputEmail" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <!-- CSS class applied based on validation -->
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" formControlName="email" name="email" [ngClass]="{inValid: !courseForm.get('email').valid && courseForm.get('email').touched, valid: courseForm.get('email').valid && courseForm.get('email').touched}">
        <span class="help-block" *ngIf="!courseForm.get('email').valid && courseForm.get('email').touched">Please Enter a valid email</span>
      </div>
    </div>
    <!-- email input ends here -->
    <div class="form-group">
      <label for="inputAddress" class="col-sm-2 control-label">Address</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputAddress" placeholder="Your Address" formControlName="address" name="address"
          [ngClass]="{inValid: !courseForm.get('address').valid && courseForm.get('address').touched, valid: courseForm.get('address').valid && courseForm.get('address').touched}">
        <!--Display error message on MinLength and MaxLength Validation-->
        <span class="help-block" *ngIf="courseForm.get('address')?.errors?.required && courseForm.get('address').touched">Please Enter Your Address</span>
        <span class="help-block" *ngIf="(courseForm.get('address')?.errors?.minlength?.requiredLength !== courseForm.get('address')?.errors?.minlength?.actualLength) && courseForm.get('address')?.touched">Address should be at least 10 characters long</span>
      </div>
    </div>
    <!-- address input ends here -->
    <div class="form-group">
      <label for="inputDate" class="col-sm-2 control-label">DOB</label>
      <div class="col-sm-10">
        <input type="date" class="form-control" id="inputDate" placeholder="DOB" formControlName="date" name="date" [ngClass]="{inValid: !courseForm.get('date').valid && courseForm.get('date').touched, valid: courseForm.get('date').valid && courseForm.get('date').touched}">
        <!--Display error message on MinLength and MaxLength Validation-->
        <span class="help-block" *ngIf="courseForm.get('date')?.errors?.required && courseForm.get('date').touched">Please Enter a valid Date-of-Birth</span>
        <!-- <span class="help-block" *ngIf="(courseForm.get('date')?.errors?.minlength?.requiredLength !== courseForm.get('date')?.errors?.minlength?.actualLength) && courseForm.get('date')?.touched">Please enter a valid DOB</span> -->
      </div>
    </div>
    <!-- date input ends here -->
    <div class="form-group">
      <label for="sel1" class="col-sm-2 control-label">Choose Course</label>
      <div class="col-sm-10">
        <select class="form-control" id="sel1" formControlName="select" [(ngModel)]="selectedOption" name="select" [ngClass]="{inValid: !courseForm.get('select').valid && courseForm.get('select').touched, valid: courseForm.get('select').valid && courseForm.get('select').touched}">
          <option [value]="selectedOption" [disabled]="true">Choose Your Course</option>
          <option *ngFor="let data of dropDownArr; index as i"  [ngValue]="data.course">{{data.course}}</option>          
        </select>
        <span class="help-block" *ngIf="!courseForm.get('select').valid && courseForm.get('select').touched">Please choose a Course</span>
      </div>
    </div>
    <!-- select input ends here -->
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" [disabled]=!courseForm.valid>Submit</button>
        <button type="button" class="btn btn-default" (click)="resetForm(f)">Reset</button>
      </div>
    </div>
    <!-- submit and reset buttons ends here -->
  </form>
  <!-- form ends here -->
</section>
<app-list [coursestat]="courseStat" [personsList]="personsList"></app-list>

<section class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Registered users</div>
    <!-- search box input -->
    <input type="text" [(ngModel)]='coursestat' size="40" placeholder="filter based on course: e.g Web Development">

    <!-- List group -->
    <ul class="list-group">
      <!-- pipes transforms the username's first word by capitalize it-->
      <li class="list-group-item" *ngFor="let person of personsList | filter:coursestat:'chosenCourse'">username:&nbsp;&nbsp;{{person.name | capitalize}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; email:&nbsp;&nbsp;{{person.email}}
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; DOB: &nbsp;&nbsp;{{person.date | date: 'd/M/y'}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Address:
        &nbsp;&nbsp;{{person.address}} &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; Course Chosen: &nbsp;&nbsp;{{person.chosenCourse
        | uppercase}}</li>
    </ul>
  </div>
</section>
正如上面在评论中提到的pankaj，您应该检查值数组是否存在，如果存在，则检查长度

if (value && value.length ===  0 || !filterString || !propName) {
其次，当您应用过滤器时，您还需要检查值中是否包含某些元素，添加一个条件以检查值是否存在以及长度是否始终大于0

if(value  && value.length >  0){
把你的烟斗换成， 
过滤器.pipe.ts

export class FilterPipe implements PipeTransform {
  transform(value: any, filterString: string, propName: string): any {
    if (value && value.length ===  0 || !filterString || !propName) {
      return value;
    }
    if(value  && value.length >  0){
    return value.filter(_person => {
      return _person[propName] === filterString;
    });
   }
  }
}
在检查
value
的长度之前，请检查
value
是否存在或是否与
相似（value&&value.length==0 | | |！filterString | |！propName）{
仍然是相同的错误请使用英语，Stackoverflow团队可能会对您采取行动。为什么会出现错误。我尝试了您的建议，但错误仍然存在。现在出现了什么错误？您可以发布完整的错误吗？如果是在同一行上，请重新启动您的应用程序。是在同一行上吗？当时出现了什么问题？为什么以前没有工作？@PankajParkar我想他还没有重新启动！同样，如果是过滤器，他需要添加一个检查 
export class FilterPipe implements PipeTransform {
  transform(value: any, filterString: string, propName: string): any {
    if (value && value.length ===  0 || !filterString || !propName) {
      return value;
    }
    if(value  && value.length >  0){
    return value.filter(_person => {
      return _person[propName] === filterString;
    });
   }
  }
}