我如何仅以角度显示用户数据

时间:2017-12-09 14:16:39

标签: angular typescript

我该怎么做才能让用户只能看到自己的信息而不是整个数据库?

我尝试使用if else语句来获取我想要的数据,如下例所示,但它不起作用。

history.component.html

<div class="container">
  <div class="row" *ngFor="let histories of history">
    <div class="card card-block">
      <h4 class="card-title">{{ histories.email }}</h4>
      <p class="card-text">{{histories.amount}}</p>
    </div>
  </div>
</div>

history.component.ts

import { Component, OnInit } from '@angular/core';
import { PostsService } from '../posts.service';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-history',
  templateUrl: './history.component.html',
  styleUrls: ['./history.component.css']
})
export class HistoryComponent implements OnInit {
  history: any;
  histories: any;
  public userEmail: string;

  constructor(private postsService: PostsService, private auth: AuthService) { }

  ngOnInit() {
    this.auth.currentEmail.subscribe(email => this.userEmail = email);

    this.postsService.getAllHistory().subscribe(history => {
      if(history.email == this.userEmail){
        this.history = history;
      }
    });
  }
}

1 个答案:

答案 0 :(得分:1)

是的,你应该在角度方面这样做,根据你的代码,你不应该在这里检查验证

  this.postsService.getAllHistory().subscribe(history => {    
 //remove this line  if(history.email==this.userEmail){
         this.history = history;
      }
  });

而不是在这里

<div class="row" *ngFor="let histories of history">
      <div *ngIf="histories.email === userEmail" class="card card-block">
        <h4 class="card-title">{{ histories.email }}</h4>
        <p class="card-text">{{histories.amount}}</p>
      </div>
</div>