Question

我是Angle的新手，我想知道如何在单击复选框时重新加载视图。

我正在显示网页上的图像列表。我想根据复选框选择过滤出图像。即根据复选框的选择显示与类型对应的图像。

我的html代码是

    <hr/>
    List Of Images

    <input type="checkbox" name="class1" value="class1" data-md-icheck (change)="toggleVisibility($event)"> Male<br>


    <hr/>

<div *ngFor="let i of numArr">
  <ngui-in-view>
    <!-- <img *ngIf src="https://picsum.photos/800/300?image={{i}}" height="33%" width="33%"> -->
    <img *ngIf src="http://localhost:8080/test/{{i}}.jpg" height="33%" width="33%">
  </ngui-in-view>
</div>

<div class="num-images">
  Number of &lt;img> tag on document: {{numImages}}
</div>

组件代码为

@Component({
  selector: 'app-img',
  templateUrl: './img.component.html',
  styles: [ `
    ngui-in-view {
      min-height: 300px;

    }
    .num-images { 
      position: fixed; padding: 5px;
      bottom: 0; right: 0; background: #333;color: #fff;
    }` ]
})

export class ImgComponent  {

 classname = ""

 get numImages(): number {
    return this.element.nativeElement.querySelectorAll('img').length;
  }

   numArr = Array.from(Array(3), (_,x) => x)

  toggleVisibility(e){

   console.log(e)

  }



  constructor(public element: ElementRef) {}

}

在这里单击复选框，我打算加载过滤出的图像。请帮助

Answer 1

由于ApplicationRef-https://angular.io/api/core/ApplicationRef

，您可以做到非常简单

名为tick()的方法可用于手动刷新视图。

export class Component {
    constructor(private appRef: ApplicationRef) {}
}

toggleVisibility(e){
    console.log(e);
    this.appRef.tick();
}

Answer 2

您没有提供任何过滤逻辑，但是假设您想根据复选框过滤掉所有图像。

在您的类中声明一个名为showImages的变量。添加到模板<img>中的*ngIf="showImages"，并在change的{{1}}事件上，切换checkbox-

的值

showImages

在此基础上，希望您能够设置图像过滤的逻辑。

如何在角6中单击复选框重新加载视图

2 个答案: