Скрыть средний столбец, даже если в Angular есть данные - PullRequest
Новая
       7

Скрыть средний столбец, даже если в Angular есть данные

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

Я делаю Angular проект, и я реализовал 3 столбца (слева, по центру, справа) и поле поиска. Мне было интересно, как я могу скрыть средний столбец, когда страница открыта, даже если в моем списке есть данные (например, java, реакция).

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

2 Столбцы показывают первое изображение

Отображение среднего изображения столбца

Мой код выглядит следующим образом 

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:'java'},
    {name:'react'},
    {name:'vue'},
    {name:'javascript'},
    {name:'c#'},
    {name:'css'},
    ]
   }

  ngOnInit(): void {


  }

}
.clickable {
    cursor: pointer;
  }
.material-icons.md-36 {
  margin-top: -3px;
  font-size: 36px;
}
  
.header{
  font-size: 30px;
  font-family: 'Raleway';
  opacity: 1;
  padding: 30px;
  margin-top: 5px;
}
  
  .sub-header{
    font-size: 20px; 
    margin-top: 30px;
    margin-left: 30px;
    font-weight: bold;
  }
  .tag-header{
    margin-top: 15px;
    font-size: 20px; 
    font-weight: bold;
  }
  .chart-header{
    margin-top: 118px;
    font-size: 20px; 
    font-weight: bold;
  }
  .parent {
    display: flex;
    overflow: hidden;
    width: 95vw;
  }
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.1em 0px !important;}

.w-40
{
    width:40%;
}
.w-70
{
    width:70%;
}
.w-20
{
    width:20%;
}
.d-none
{
    display:none;
}
<div class="parent">
    <div  [ngClass]="[result.length ? 'w-40' : 'w-70']">
      <div class="header">Explore All Workspaces</div>
        <div class="sub-header">Public Workspaces</div>
        <div style="margin-left: 10px; margin-top: 20px;">
        </div>
    </div>
    <div [ngClass]="[result.length ? 'w-40' : 'd-none']"> 
        <div class="chart-header">Center</div> 
        <div [hidden]="!search" >
            <div ng-show="search" *ngFor="let skill of result | filter :'name' : search : 'equal'">
            {{skill.name}}
        </div> 

   
        </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 visible people:</mat-hint>
            </mat-form-field>
        </p>
      <div class="tag-header">Tags</div>
      <div style="margin-left: 40px; margin-top: 25px;">
        <mc-tags></mc-tags>
      </div>
    </div>
  </div>
...