陣列字典如下
Data: Array<any> = [
{ name: 'A No', dshow: true, show: ''},
{ name: 'X No', dshow: false, show: false },
{ name: 'Y' , dshow: false, show: false }];
更新的HTML：
<div class="flex-child1 btn-group" *ngFor="let shw of Data; let i=index">
<div *ngIf="(shwcol.dshow== false)">
<input type="checkbox" class="btn-check" name= "{{shw.name}}" id= "{{shw.name}}" autocomplete="off" *ngIf="(shw.dshow== false)">
<label class="btn btn-outline-primary" for="{{shw.name}}" *ngIf="(shw.dshow== false)">{{shw.name}}</label></div>
</div>
CSS：
.flex-child1 {
flex: auto;
}
上面的代碼生成了兩個復選框，我猜是一個隱藏的 chekbox X, Y，問題是空白。
欲望輸出X Y
更新的代碼有助于不為錯誤值生成輸入，而是生成按鈕，如 X Y
使用更新代碼后的實際輸出
uj5u.com熱心網友回復：
我的.pipe.ts
import { Pipe, PipeTransform } from "@angular/core";
import { IMyPipe } from "./app.component";
@Pipe({ name: "myPipe" })
export class MyPipe implements PipeTransform {
transform(item: IMyPipe): IMyPipe {
if (!item.dshow) { // <--- your logic
return item;
}
}
}
app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { MyPipe } from "./my.pipe";
@NgModule({
declarations: [AppComponent, MyPipe],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
app.component.ts
import { Component } from "@angular/core";
export interface IMyPipe {
name: string;
dshow: boolean;
show: boolean;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
data: IMyPipe[] = [
{ name: "A No", dshow: true, show: false },
{ name: "X No", dshow: false, show: false },
{ name: "Y", dshow: false, show: false }
];
}
app.component.html
<div class="flex-child1 btn-group" *ngFor="let shw of data | myPipe">
<input
type="checkbox"
class="btn-check"
name="{{shw.name}}"
id="{{shw.name}}"
autocomplete="off"
/>
<label class="btn btn-outline-primary" for="{{shw.name}}">
{{shw.name}}
</label>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529499.html