在Angular 6项目中,我使用ng-bootstrap创建了typeahead,它返回了对象数组。
我想以多列格式显示结果,每列代表对象的属性。
在AngularJS中,我可以使用Angular UI Bootstrap typeahead指令来实现这一点,
<div class="typeahead-class">
<input id="slipInfoFilter" type="text" class="form-control input-sm" ng-model="vm.contractCertainty.SlipInfo" placeholder="Start typing to choose an Insured"
typeahead="slipInfo as slipInfo.Insured.InsuredName for slipInfo in vm.getSlipInfos($viewValue)" typeahead-editable="false"
typeahead-template-url="App/Features/ContractCertainty/SlipInfoList.html"/>
</div>
结果模板是这样的:
<a>
<div class="row">
<div class="col-xs-2">
<span ng-bind-html="match.model.Insured.InsuredName | typeaheadHighlight:query"></span>
</div>
<div class="col-xs-1">
<span ng-bind-html="match.model.YearOfAccount"></span>
</div>
<div class="col-xs-2">
<span ng-bind-html="match.model.Broker.BrokerName"></span>
</div>
<div class="col-xs-1">
<span ng-bind-html="match.model.Cedant"></span>
</div>
<div class="col-xs-2">
<span ng-bind-html="match.model.Layer"></span>
</div>
<div class="col-xs-1">
<span ng-bind-html="match.model.Inception | date:'dd-MM-yyyy'"></span>
</div>
<div class="col-xs-1">
<span ng-bind-html="match.model.LeadDisplay"></span>
</div>
<div class="col-xs-1">
<span ng-bind-html="match.model.RiskStatus"></span>
</div>
结果看起来像这样:
我无法在Angular 6 / ng-bootstrap中复制它。我用新的innerHTML指令替换了模板中的ng-bind-html指令,但无济于事。
到目前为止,这是我的尝试:
<ng-template #rt let-r="result" let-t="term">
<a>
<div class="row">
<div class="col-xs-3">
<span [innerHTML]="r.insured.name"></span>
</div>
<div class="col-xs-3">
<span [innerHTML]="r.layer"></span>
</div>
</div>
</a>
</ng-template>
<div class="typeahead-class">
<input type="text" class="form-control" [class.is-invalid]="searchFailed" [(ngModel)]="dfRisk" [ngbTypeahead]="search"
placeholder="Find a risk" [resultTemplate]="rt" />
<span *ngIf="searching">Searching...</span>
<div class="invalid-feedback" *ngIf="searchFailed">No risks could be found.</div>
</div>
这里是我不满意的结果:
我将不胜感激。