Как показать площадь без фишек, если нет значения - PullRequest
Новая
       20

Как показать площадь без фишек, если нет значения

3 голосов
/ 26 апреля 2019

enter image description here Моя таблица использует чипы для ввода значения в поле «тип». но когда в нем нет ценностей. в нем все еще есть пустой чип. Кто-нибудь знает, как я могу решить эту проблему? 

[![html

 <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="type">Type</th>
      <td mat-cell *matCellDef="let truck" class="pr-24">
        <mat-chip-list>
          <span *ngFor="let truck of truck.type.split(',')">
            <mat-chip>{{truck}}</mat-chip>
          </span>
        </mat-chip-list>
      </td>
  </ng-container>][1]][1]

component.ts 

import { Component, OnInit, ViewChild, ElementRef, Input, OnChanges } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatChipsModule,  MatChipInputEvent } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { Truck } from '../truck';
import { MapsAPILoader } from '@agm/core';
import { TruckDetailComponent } from '../truck-detail/truck-detail.component';
import { PlannerProject } from 'app/services/planner-projects/planner-project';
import { TrucksService } from '../trucks.service';
import { map, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
import * as _ from 'lodash';
import { fromEvent } from 'rxjs';
import { ConfirmComponent } from 'app/shared/components/confirm/confirm.component';
import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
import { MyDialogComponent } from 'app/main/delivery-orders/my-dialog/my-dialog.component';
import {COMMA, ENTER} from '@angular/cdk/keycodes';


@Component({
  selector: 'app-trucks',
  templateUrl: './trucks.component.html',
  styleUrls: ['./trucks.component.scss']

})
export class TrucksComponent implements OnInit, OnChanges {
  @Input() project: PlannerProject;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  selection: SelectionModel<Truck>;

  _displayColumns: string[] = ['selectCol', 'truckSize', 'truckBuildUp', 'truckName', 'type', 'address', 'shift', 'maxWeight', 'maxVolume', 'actions'];

  _dataSource: MatTableDataSource<Truck>;

  @ViewChild('search') search: ElementRef;
  projectData: string;

  constructor(private mapsLoader: MapsAPILoader,
              private _matDialog: MatDialog,
              private truckService: TrucksService) { }

То есть в строке должна отображаться пустая область без фишек, если нет данных

Ответы [ 3 ]

5 голосов
/ 26 апреля 2019

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

<mat-chip *ngIf="truck">{{truck}}</mat-chip>
1 голос
/ 26 апреля 2019

Я бы проверил, является ли truck.type пустым, потому что split вернет массив размера 1, если он не может разбить строку, поэтому возвращает пустую строку. По этой причине вы получаете пустые фишки. 

<mat-chip-list *ngIf="truck && truck.type && truck.type.length > 0">
  <span *ngFor="let truck of truck.type.split(',')">
    <mat-chip>{{truck}}</mat-chip>
  </span>
</mat-chip-list>

Редактировать: изменено * ngЕсли проверка для грузовика и грузовика. Тип

1 голос
/ 26 апреля 2019

Array.split() в пустой строке возвращает массив с 1 пустой строкой. Добавьте чек, используя *ngIf="truck.type", в свой список фишек, чтобы рендерить, только когда он не emtpy. 

var truck = {type: '' };

var s = truck.type.split(',');

console.log(s); // See Array with one item.
...