javascript - 在 Angular 中的两个不同视图之间切换

问题描述

我在我编写的 Angular 应用程序中有一个搜索表单。您可以输入一个单词或短语，当您点击搜索时，您会看到结果，您可以选择在标准列表视图（格式化为看起来像谷歌搜索中的结果）或卡片视图之间切换。列表视图是默认设置，用户可以切换到卡片视图。

mat-button-toggle-group我通过 a和 on处理切换(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变量肯定正在更改。它只是不会触发对变量的更改。此外，如果我尝试使用分页按钮，即使我关闭了平铺模式，视图也会保持平铺模式。谁能发现我做错了什么？

标签： javascriptangularangular-material

javascript - 在 Angular 中的两个不同视图之间切换

问题描述

解决方案

推荐阅读