提前角6 ng-bootstrap多列结果

时间:2018-07-26 10:02:18

标签: angular ng-bootstrap typeahead

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

结果看起来像这样:

Typeahead results

我无法在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>

这里是我不满意的结果:

New typeahead

我将不胜感激。

0 个答案:

没有答案