代码之家 › 专栏 › 技术社区 › Shan-Desai askovpen

在某些条件检查后,将fontAwesome检查添加到*ngfor中的各个选项标记

angular css html

Shan-Desai askovpen · 技术社区 · 6 年前

(问题完全变了)

我使用 <select> with *ngfor 显示属性名称列表,如下所示:


   
    
     情景
    
    
     如果用户与右侧面板交互,即检查或取消检查值,或单击
     
      Add property without filters.>code>button i save the name of the property in a json structure:。
     
    
    
     。{
SelectedProperties:['IsDampProof','.']
}
我想在上述数组中的所有属性前面添加<i class=“fa fa check fa-1px”></i>由于选项和i在angfor中loop i cannot change the individual states currently.例如:


<select size=“15”class=“form control mr-4”>
(click)=“获取属性值(eachval)”
每种转换属性
</optgroup>
系紧如下:




如果用户与右侧面板交互,即检查或取消检查值或单击Add property without Filters

{
  selectedProperties: ['isDampProof', '..']
}


我想补充一下<i class="fa fa-check fa-1px"></i>option和ingFor

<select size="15" class="form-control mr-4">
    <optgroup label="Properties">
       <option *ngFor="let eachVal of dataResults"
           [selected]="searchModel.translatedProperty===eachVal.translatedProperty"
           (click)="getPropertyValues(eachVal)"
        >
<i class="fa fa-check fa-1x" *ngIf="....Condition here..."></i>
{{eachVal.translatedProperty}}
      </option>
    </optgroup>
 </select>

2 回复 | 直到 6 年前

DrNio 6 年前

也许您需要修改此代码段以在组件中工作,但您可以得到以下想法: <option [disabled]="eachVal.translatedProperty === 'hasCompotion' && melanineState === false">

我不会用 :checked 属性,但在单击复选框时绑定一个状态,以便现在可以使用该复选框的值/状态。

如果需要,可以从组件和的模型中添加更多的代码 eachVal 对象以添加更具体的代码段。

Shan-Desai askovpen 6 年前

我最终使用了Unicode复选标记 ngClass 因为在 <option> 标签。

我创造了一个 propSelection 函数,用于检查是否选择了属性的筛选器。

组件.html

<select size="15" class="form-control mr-4">
                            <optgroup label="Properties">
                                <option *ngFor="let eachVal of dataResults"
                                        [selected]="searchModel.translatedProperty===eachVal.translatedProperty"
                                        (click)="getPropertyValues(eachVal)"
                                        [ngClass]="{'checkMark': propSelection(eachVal.translatedProperty)}"
                                >{{eachVal.translatedProperty}}
                                </option>
</optgroup>

组件.ts

propSelection(eachVal): boolean {
        // console.log(name);
        return this.sparqlJSON['parameters'].findIndex(i => i === eachVal) > -1;
    }