Сначала спрячьте данные и показывайте их только при поиске в Angular - PullRequest
Новая
       6

Сначала спрячьте данные и показывайте их только при поиске в Angular

0 голосов
/ 25 марта 2020

Я пытаюсь внедрить поисковый фильтр в свой проект Angular, и мне интересно, как я могу сделать так, чтобы данные не отображались при открытой странице и отображали только результат, когда пользователь выполняет поиск данных в окне поиска а также показать количество результатов.

My HTML

<div [ngClass]="[result.length ? 'w-40' : 'd-none']"> 
    <div style="margin-top: 118px;">Center</div> 
    <div >
        <div ng-show="search" *ngFor="let skill of result | filter :'name' : search : 'equal'">
        {{skill.name}}
    </div> 

</div>

<div [ngClass]="[result.length ? 'w-20' : 'w-50']">
    <p style="margin-top: 25px;">
        <mat-form-field appearance="fill" style="width: 450px;">
          <input matInput [(ngModel)]="search" placeholder="Placeholder" style="margin-left: 10px; font-size: 25px;">
          <mat-icon class="md-36" color="primary"  matPrefix >search</mat-icon>
          <mat-hint>Number of results: #CountNumberHere</mat-hint>
        </mat-form-field>
    </p>
  <div class="tag-header">Tags</div>
  <div style="margin-left: 40px; margin-top: 25px;">
  </div>
</div>

MY TS 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'mc-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.scss']
})
export class ExploreComponent implements OnInit {
  
  result;
  search;

  constructor() {
    this.result =[
    {name:'Chard1'},
    {name:'react'},
    {name:'vue'},
    {name:'javascript'},
    {name:'c#'},
    {name:'css'},
    ]
   }

  ngOnInit(): void {


  }

}

Я пробовал решение из другого поста, но пока не могу понять, любое предложение будет очень полезным.

...