Question

我想在html中的两个不同数据库之间切换。我已经设置了一个boolean isNow，它在开始时等于true，但是当在日历中单击date并触发onChange($event)时，它将然后将isNow boolean设置为false。如果isNow等于true，那么ngFor会let getObj of databaseA'，但我希望ngFor在我的databaseB *ngFor="let getObj of databaseB"中循环代替。另外，当单击button时，它会将isNow的值切换回true，到目前为止，我已经尝试过了，但是由于某种原因，它不起作用。这是到目前为止我尝试过的代码

  databaseA: Observable<any[]>; 
  databaseB: Observable<any[]>;
  isNow: boolean = true;


  get data(): string {
    return this.databaseService.serviceData;
  }

  set data(date) { 
    this.databaseService.serviceData= (moment(date).format(dateFormat)); 
  }   


  @Input() placeholder;
  @Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
  @Input() selectedValue;
  @Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();

  private _selectedValue;

  constructor(db: AngularFireDatabase, public databaseService: DatabaseService){
    this.databaseA = db.list('databaseA').valueChanges();
    this.databaseB = db.list('databaseB/'+this.databaseService.serviceData).valueChanges();   
  }

  toggleNow(){
  this.isNow = true; 
  }

  ngOnInit() {
    this._selectedValue = this.data;    
  }

  onChange($event) {
    this.selectedValue = this.updateDate($event.value);
    this.onFilter.emit(this.data);
    this.isNow = false;
  }

  updateDate(date) {
    let formatedDate;
    if (date !== undefined) {
      formatedDate = moment(date).format(dateFormat);      
    }    
    this.selectedValueChange.emit(formatedDate);  
    return formatedDate;   
  }
}

在HTML组件中，我使用了以下方法：

<button mat-button (click)=“toggleNow()"> NOW </button>
<ng-container *ngIf=isNow>
    <option ngFor=“let getObj of databaseA|async”></option>
    <option ngIfElse=“let getObj of databaseB|async></option>
    <div>{{getObj.name}}</div>
    <div>{{getObj.field}}</div>
    <div>{{getObj.status}}</div>
</ng-container>

这样做的原因是当切换日期时，将显示一个数据库，该数据库显示一组特定的值，但是如果查看者希望查看当前信息，那么“现在”按钮将提供此选项。我正在使用Angular7。我觉得这应该可行。我相信这是应该使用的逻辑，但是我尝试了不同的方法来进行设置。

Answer 1

ngIfElse不能与ngFor语法一起使用。而是可以考虑以下解决方案。它将起作用。

<ng-container *ngIf=isNow>
  <option *ngFor=“let getObj of databaseA|async”></option>
</ng-container>

<ng-container *ngIf=!isNow>
  <option *ngFor=“let getObj of databaseB|async"></option>
</ng-container>

Answer 2

您必须将实现的其他条件分开，您可以这样做。

<ng-template #selectedData>
    <option *ngFor=“let getObj of databaseA|async”></option>
    <div>{{getObj.name}}</div>
    <div>{{getObj.field}}</div>
    <div>{{getObj.status}}</div>
</ng-template>
<ng-template #CurrentData>
    <option *ngFor=“let getObj of databaseB|async></option>
    <div>{{getObj.name}}</div>
    <div>{{getObj.field}}</div>
    <div>{{getObj.status}}</div>
</ng-template>

在NgIf和NgIfElse块中使用NgFor

2 个答案: