如果没有价值，如何显示没有筹码的区域

Question

我的表使用筹码输入“类型”下的值。但是当其中没有值时。里面还有一块空筹码。有谁知道我该如何解决这个问题？

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

因此，如果没有数据，它应该在没有芯片的行中显示一个空白区域

Answer 1

在芯片上添加一个* ngIf，只有在* ngIf内部满足条件时，它才会显示。<mat-chip&nbsp;*ngIf="truck">{{truck}}</mat-chip>

Answer 2

我将检查truck.type是否为空，因为split如果无法拆分字符串，将返回大小为1的数组，因此返回空字符串。这就是您得到空筹码的原因。<mat-chip-list *ngIf="truck && truck.type && truck.type.length > 0">&nbsp; <span *ngFor="let truck of truck.type.split(',')">&nbsp; &nbsp; <mat-chip>{{truck}}</mat-chip>&nbsp; </span></mat-chip-list>编辑：已更改* ng如果检查卡车和卡车。类型

Answer 3

Array.split()在空字符串上返回包含1个空字符串的数组。将使用的支票添加*ngIf="truck.type"到芯片列表中，以便仅在不为空时进行渲染。var truck = {type: '' };var s = truck.type.split(',');console.log(s); // See Array with one item.