如何在object.object.property上创建搜索框？

Question

我正在尝试创建一个搜索框，该搜索框将按表中的特定字段进行搜索。为了将数据放入表中，我必须将数据as和object绑定到一个对象中，然后我要在第二个object属性上进行搜索。

当我仅与object.property绑定时，我可以在应用程序的其他部分中使用此方法。

这就是我正在使用的。 HTML和TS

    
    
    
    searchString: string;
  
    zone: ZoneInfo = new ZoneInfo();
    zones: CityInfo[];
    fullZone: FullZoneAdd = new FullZoneAdd();
    fullz: FullZone = new FullZone();
    @Input('fullzs') fullzs: FullZone[];
    
        ngOnInit() {
        this.getAllZones();
        }

<div class="row m-y-1">
    <div class="col-xs-12 col-md-6 form-inline">
        <div class="form-group">
            <label>Search by Zone:</label>
            <input class="form-control" type="text" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString">
        </div>
    </div>
</div>

<!--display all zone lookup-->
<div class="col-xs-12">
    <table class="table table-striped table-bordered" id="zoneLookUpTable">
        <tbody id="zoneLookUpTable">
            <tr>
                <th class="text-center col-xs-1">Zone</th>
                <th class="text-center col-xs-4">Pickup City</th>
                <th class="text-center col-xs-2">Cost Per Case</th>
                <th class="text-center col-xs-2">Pickup Days</th>
                <th class="text-center col-xs-1">Min Charge</th>
                <th class="text-center col-xs-1">Edit</th>
                <th class="text-center col-xs-1">Delete</th>
            </tr>
            <tr *ngFor="let zone of zones | filter : 'description' : searchString; let i = index;" (mouseover)="highlightRow(zone)"
                [ngClass]="{'highlight' : zone.city.cityName == selectedZone}">
                <td>{{zone.zone.description}}</td>
                <td class="searchable">{{zone.city.cityName}}</td>
                <td>{{zone.zone.costPerCase | currency :'USD':'symbol':'1.3-3'}}</td>
                <td>{{zone.zone.pickUpDays}}</td>
                <td>{{zone.zone.minimumCharge | currency :'USD':'symbol':'1.3-3'}}</td>
                <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" (click)="editZone($event, zone)"><span class="glyphicon glyphicon-edit"></span></button></p></td>
                <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" (click)="promptDelete($event, zone.zone.zone_id)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
            </tr>
        </tbody>
    </table>
</div>