在角度中的两个不同视图之间切换

Question

我在编写的Angular应用中有一个搜索表单。 您可以输入单词或短语，当您点击搜索时，系统会为您提供结果，您可以选择在标准列表视图（格式类似于Google搜索的结果）或卡片视图之间进行切换。 列表视图是默认设置，用户可以切换到卡片视图。

我通过mat-button-toggle-group和mat-button-toggle-group (change)进行mat-button-toggle ，我设置了一个布尔变量，供标记使用以确定显示哪个视图。 如果我从默认视图（列表）切换到卡片视图，则所有这些功能都非常出色。 但是，当我想从名片视图切换回列表视图时，什么也没发生。 我已经将日志记录添加到(change)事件中，因此我知道该变量正在重置，但是什么也没有发生。 下面是我的代码：

search.component.html

<div class="search-fields page-content">
  <mat-form-field appearance="outline" disabled="false">
    <mat-label>Keyword(s)</mat-label>
    <input #txtSearch matInput type="search" placeholder="Search Phrase" [(ngModel)]="this.searchPhrase" (keyup.enter)="onSearchClick()">
    <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="this.searchPhrase=''">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
  <button mat-raised-button color="primary" (click)="onSearchClick()">Search</button>
</div>

<div *ngIf="dataModel" class="container page-content">
  <div class="full-width">
    <mat-button-toggle-group value="false">
      <mat-button-toggle selected="true" value="false" (change)="onToggleClick($event.value)" matTooltip="View List">
        <mat-icon>view_list</mat-icon>
      </mat-button-toggle>
      <mat-button-toggle value="true" (change)="onToggleClick($event.value)" matTooltip="View Tiles">
        <mat-icon>view_comfy</mat-icon>
      </mat-button-toggle>
    </mat-button-toggle-group>
  </div>
  <span class="query-info">Showing {{ getBeginHits() }} - {{ getEndHits() }} of {{ this.dataModel.totalHits }} results </span>
  <div *ngIf="!isTile" class="result-detail">
    <div *ngFor="let page of dataModel.pages">
      <div class="full-width">
        <h3><a href="{{ '/page/' + page.id.trim() }}">{{ page.title }}</a></h3>
      </div>
      <div class="full-width matches-detail">
        <span>{{ page.matchesString }}</span>
      </div>
      <div class="full-width result-snippet" [innerHTML]="page.textSnippet">
      </div>
    </div>
  </div>
  <mat-grid-list cols="5" *ngIf="isTile">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title><strong>{{ page.title }}</strong></mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          <ul>
            <li *ngFor="let s of page.matchesArray">{{ s }}</li>
          </ul>
        </mat-card-content>
        <mat-card-actions>
          <button mat-raised-button color="primary" routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
  <div class="align-center">
    <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
      <mat-icon aria-label="Previous">navigate_before</mat-icon>
    </button>
    <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
      <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
    </ng-container>
    <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
      <mat-icon aria-label="Next">navigate_next</mat-icon>
    </button>
  </div>
</div>

search.component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {PageService} from '../service/page.service';
import {PageResult} from '../../shared/models/page-result.model';
import { environment } from '../../../environments/environment';
import * as _ from 'lodash';
import {_sanitizeHtml} from '@angular/core/src/sanitization/html_sanitizer';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  searchPhrase: string;
  isTile: boolean;
  dataModel: PageResult;
  imageBase: string = environment.imageUrl + 'thumbs/';
  currentIndex: number;

  constructor(private route: ActivatedRoute, private pageService: PageService) { }

  ngOnInit() {
  }

  getPageArray(): any[] {
    return new Array(this.dataModel.totalPageResults);
  }

  getBeginHits(): number {
    return ((this.dataModel.currentIndex * this.dataModel.resultLimit) - this.dataModel.resultLimit + 1);
  }

  getEndHits(): number {
    return (this.dataModel.currentIndex * this.dataModel.resultLimit);
  }

  onNavClick(index: number) {
    this.currentIndex = index;
    this.pageService.search(this.searchPhrase, index, 20)
      .subscribe(
        data => this.dataModel = data,
        error => console.log(error),
      );
  }

  onToggleClick(value: boolean) {
    this.isTile = value;
    console.log('isTile: ' + this.isTile.toString());
  }

  onSearchClick() {
    this.currentIndex = 1;
    this.isTile = false;
    this.pageService.search(this.searchPhrase, 1, 20)
      .subscribe(
        data => this.dataModel = data,
        error => console.log(error),
      );
  }

}

如果查看onToggleClick()方法，那里的日志记录告诉我isTile变量肯定已更改。 它只是不触发对变量的更改。 此外，如果我尝试使用分页按钮，即使我已关闭平铺模式，该视图仍处于平铺模式。 谁能发现我在做什么错？

Answer 1

你有没有尝试包裹

<mat-grid-list cols="5" *ngIf="isTile">

in a <div *ngIf="isTile">

就像您要全宽吗？ 也许* ngIf在mat-grid-list中不起作用，但应该起作用