Question

有两个“选择”和两个块。应根据选择显示块中的信息。在“选择”列表中选择特定用户时，第一个块显示有关该用户的信息。并且如果在第二个“选择”框中选择某个日期，则将显示所选用户所选日期的所有帖子。

这是我的代码，但是它不起作用，谁可以帮助修复它？

html：

<select   (change)="onSelectedUser(user.value)">
  <option  *ngFor="let user of users" [value]="user.user_id">
    {{user.name}}
  </option>
</select>
<select  (change)="onSelectedYear(d.value)">
  <option type="number"  *ngFor="let d of dates">
     {{ d.dates }}
  </option>
 </select>

<div *ngIf="userId">
   <form>
     <label class="control-label">Name</label>
     <input type="text" class="form-control" [(ngModel)]='user.name' name="name" disabled>
     <label class="control-label">E-mail</label>
     <input type="email" class="form-control" [(ngModel)]='user.email' name="email" disabled>
     <label class="control-label">Phone</label>
     <input type="number" class="form-control" [(ngModel)]='user.phone' name="phone" disabled>
   </form>
</div>
<div *ngIf="date">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Date</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let post of filteredposts">
         <td>{{post.post_text}}</td>
         <td>{{post.dates}}</td>
        </tr>
      </tbody>
   </table>
</div>

ts：

export class PostsComponent implements OnInit {

  users: Array<User>;
  dates: Array<Date>;
  posts: Array<Post>;

  public filteredPosts: Post[];
  private _posts: Post[];

  constructor(
    public authTokenService: Angular2TokenService, 
    private servUser: UserService,
    private servDate: DateService,
    private servPost: PostService
  ) { 
    this.dates = new Array<Date>();
    this.users = new Array<User>();
    this.posts = new Array<Post>();
  }

  ngOnInit() {
    this._filtered(this.users, this.dates);
    this.loadUsers();
    this.loadPosts();
    this.loadDates();

  }

  private loadUsers() {
    this.servUser.getUsers().subscribe(users => this.users = users);
  }

  private loadDates() {
    this.servDate.getDates().subscribe(dates => this.dates = dates);
  }

  private loadPost() {
    this.servPost.getPosts().subscribe(posts => this.posts = posts);

  }


  public onSelectedUser(userId: User[]): void {
    this._filtered(userId, this.dates);
  }

  public onSelectedDate(date: Date[]): void {
    this._filtered(this.users, date);
  }

  private _filtered(userId: User[], date: Date[]): void {
    let filteredPosts: Post[] = this._posts;
    if (userId) {
      filteredPosts = filteredPosts.filter((post: Post) => post.p_users_id === +userId);
    }
    if (year) {
      filteredPosts = filteredPosts.filter((post: Post) => post.dates === +date);
    }
    this.filteredPosts = filteredPosts;
  }


}

错误TypeError：无法读取未定义的属性“过滤器”

在PostsComponent._filtered（posts.component.ts：87）

在PostsComponent.ngOnInit（posts.component.ts：54）

Answer 1

尝试使用ngModel。

  <select (change)="onSelectedUser(selectedUser)" [(ngModel)]="selectedUser">
    <option  *ngFor="let user of users" [value]="user.user_id">
      {{user.name}}
    </option>
  </select>
    <select (change)="onSelectedDate(selectedDate)" [(ngModel)]="selectedDate">
    <option  *ngFor="let date of dates" [value]="date">
      {{date}}
    </option>
  </select>
  <div *ngFor="let p of filteredPosts">
      {{p.post}}
  </div>

这是一个简单的示例。

  selectedUser:number;
  selectedDate:number;
  users=[{name:'A',user_id:1},{name:'B',user_id:2}]
  dates=[1,2,3];
  posts=[{user_id:1,date:1,post:"qqqq"},
  {user_id:1,date:1,post:"adcs"},
  {user_id:1,date:2,post:"dssd"},
  {user_id:1,date:3,post:"jkjk"},
  {user_id:2,date:1,post:"zzzzz"}];

  filteredPosts=[];

  constructor(public navCtrl: NavController) {

  }

 public onSelectedUser(userId:number): void {
    this._filtered(userId, this.selectedDate);
  }

  public onSelectedDate(date: number): void {
    this._filtered(this.selectedUser, date);
  }

  private _filtered(userId: number, date: number): void {
    this.filteredPosts=[];
    if (userId && date) {
      this.filteredPosts = this.posts.filter((post: any) => post.user_id == userId);
      this.filteredPosts = this.filteredPosts.filter((post: any) => post.date == date);
    }
    else if (userId) {
      this.filteredPosts = this.posts.filter((post: any) => post.user_id == userId);
    }
    else if (date) {
      this.filteredPosts = this.posts.filter((post: any) => post.date == date);
    }
  }

Answer 2

在ngOnInit中呼叫的顺序就很重要。您甚至在将数据加载到this._filtered(this.users, this.dates);和this.users中之前就调用this.dates。这就是为什么您获得 "ERROR TypeError: Cannot read property 'filter' of undefined" 的原因。将数据加载到this._filtered(this.users, this.dates);和this.users

后，尝试调用this.dates

希望这对您有所帮助！

筛选所选数据

2 个答案: