过滤所选数据答案

【问题标题】：Filter the selected data过滤所选数据
【发布时间】：2018-07-12 21:46:14
【问题描述】：

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

这是我的代码，但它不起作用，谁能帮忙修复它？

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;
  }


}

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

在 PostsComponent._filtered (posts.component.ts:87)

在 PostsComponent.ngOnInit (posts.component.ts:54)

【问题讨论】：

@Chellappan 抱歉，我有代理阻止此站点
“它不起作用”太模糊了。特别是如果您不发布我们可以复制的内容。比这更具体。
@JBNizet 我更新了问题
错误信息中有什么不清楚的地方？您定义一个接受数字作为参数的函数，然后将 Date 数组传递给它。这怎么可能行得通？

标签： angular typescript

【解决方案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);
    }
  }

【讨论】：

【解决方案2】：

您在ngOnInit 中的调用顺序很重要。甚至在将数据加载到this.users 和this.dates 之前，您就调用了this._filtered(this.users, this.dates);。这就是您收到 "ERROR TypeError: Cannot read property 'filter' of undefined" 的原因。将数据加载到this.users和this.dates后尝试调用this._filtered(this.users, this.dates);

希望对你有帮助！

【讨论】：