My table uses chips to input for the value under "type". but when there is no values in it. there still is a empty chip in it. anyone knows how i can fix this problem?

[![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]

ponent.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-detailponent';
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/ponents/confirm/confirmponent';
import { FuseConfirmDialogComponent } from '@fuse/ponents/confirm-dialog/confirm-dialogponent';
import { MyDialogComponent } from 'app/main/delivery-orders/my-dialog/my-dialogponent';
import {COMMA, ENTER} from '@angular/cdk/keycodes';


@Component({
  selector: 'app-trucks',
  templateUrl: './trucksponent.html',
  styleUrls: ['./trucksponent.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) { }

So it should show an empty area in the row without chips if there is no data

My table uses chips to input for the value under "type". but when there is no values in it. there still is a empty chip in it. anyone knows how i can fix this problem?

[![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]

ponent.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.ponent';
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/ponents/confirm/confirm.ponent';
import { FuseConfirmDialogComponent } from '@fuse/ponents/confirm-dialog/confirm-dialog.ponent';
import { MyDialogComponent } from 'app/main/delivery-orders/my-dialog/my-dialog.ponent';
import {COMMA, ENTER} from '@angular/cdk/keycodes';


@Component({
  selector: 'app-trucks',
  templateUrl: './trucks.ponent.html',
  styleUrls: ['./trucks.ponent.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) { }

So it should show an empty area in the row without chips if there is no data

• javascript
• angular
• angular-template

• Use *ngIf="truck.type" in <mat-chip-list> – Raphael Mayer Commented Apr 26, 2019 at 7:47
• split on an empty string will return an array with 1 item which is empty. Add a check to see if truck.type is empty string then not show – DTul Commented Apr 26, 2019 at 7:48
• I highly remend to not reuse your variables like that. Use different variable names, not only "truck" for multiple meanings. – Raphael Mayer Commented Apr 26, 2019 at 7:58

3 Answers 3

add an *ngIf to your chip, this will make it show only when the condition is satisfied inside the *ngIf.

<mat-chip *ngIf="truck">{{truck}}</mat-chip>

Array.split() on an empty string returns an array with 1 empty string. Add a check using *ngIf="truck.type" to your chip list to only render when it is not emtpy.

var truck = {type: '' };

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

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

I would check if truck.type is empty, because split will return an array of size 1 if it cannot split the string, therefore returning an empty string. This is the reason you get empty chips.

<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>

Edit: changed *ngIf check for truck and truck.type