Question

我需要根据条件以编程方式在listview项目中执行隐藏和显示按钮。

下面我尝试了* ngif条件。它完全删除DOM。因此它完全显示secondVisible布局按钮。

html文件：

// inside listview ng-template :

 <Button *ngIf="firstVisible" row="0" col="2" text="First"> </Button>

 <StackLayout *ngIf="secondVisible" row="0" col="2">
    <Button text="second" > </Button>
    <Button text="group"  </Button>
 </StackLayout>

ts档案：

  if(avail == true){

            this.firstVisible = true;
            this.secondVisible = false;

           } else {

            this.firstVisible = false;
            this.secondVisible = true;

           }

有没有其他方法以编程方式执行隐藏和显示按钮而不删除listview中的DOM，除了* ngif条件。

Answer 1

是的，使用[hidden]属性。它会将元素保留在dom中。

 <Button [hidden]="!firstVisible" row="0" col="2" text="First"> </Button>

 <StackLayout [hidden]="!secondVisible" row="0" col="2">
    <Button text="second" > </Button>
    <Button text="group"  </Button>
 </StackLayout>

Answer 2

mtext(side=2,at=0.25,text=bquote(y[paste(i,",\U25CF")]),las=2)

使用隐藏属性会将其隐藏在DOM中而不是完全删除它，如果你想要一个show使用：

<Button [hidden]="firstVisible" row="0" col="2" text="First"> </Button>

https://angular.io/guide/ajs-quick-reference#ng-show详细解释

Answer 3

我是为这个问题创建的一名战士。LINK

@Component({
  selector: 'my-app',
  template: `
    <div (click) = "show = !show">
      Book
      <div [ngClass]="(show)?'hide-it':'show-it'"> Details</div>
    </div>

    <div (click) = "show = !show">
      BookS
      <div [ngClass]="(show)?'hide-it':'show-it'"> Detailsss</div>
    </div>
  `,
})
export class App {
  name:string;
  show:string;
  constructor() {
    this.name = 'Angular 2 Ng Class';
    this.show = "true";
   }
  logout(){
    this.show = "false";
  }

}

<强> CSS

.show-it {
  visibility: visible;
}

.hide-it {
  visibility: hidden;
}

Answer 4

我只会将* ngIf用于else块。 * ngIf会对像isVisible这样的变量进行处理，而在按钮上你只需要交换布尔值。如果你没有为changeDetection制作一些奇怪的东西，那么Angular本身就可以看到视图;）

如何在listview项中执行隐藏和显示按钮而不删除angular2 nativescript中的DOM

4 个答案: