当前位置: 首页 > 知识库问答 >
问题:

ngForIn能用于angular 4吗?

曹德明
2023-03-14

我试图使用*ngfor迭代对象的属性,但在中使用。当我试着这么做的时候

@Controller({
  selector: 'sample-controller',
  template: `
    <ul>
      <li *ngFor="let i in obj">
        <b>{{i}}</b>: {{obj[i]}}
      </li>
    </ul>`
})
class SampleController {
  obj = {a: 1, b: 2}
}

共有1个答案

西门磊
2023-03-14

正如注释中提到的AJT_82,您可以为此目的创建特殊指令。它将基于ngforof 指令:

interface NgForInChanges extends SimpleChanges {
  ngForIn?: SimpleChange;
  ngForOf?: SimpleChange;
}

@Directive({
  selector: '[ngFor][ngForIn]'
})
export class NgForIn<T> extends NgForOf<T> implements OnChanges {

  @Input() ngForIn: any;

  ngOnChanges(changes: NgForInChanges): void {
    if (changes.ngForIn) {
      this.ngForOf = Object.keys(this.ngForIn) as Array<any>;

      const change = changes.ngForIn;
      const currentValue = Object.keys(change.currentValue);
      const previousValue = change.previousValue ? 
                            Object.keys(change.previousValue) : undefined;
      changes.ngForOf =  new SimpleChange(previousValue, currentValue, change.firstChange);

      super.ngOnChanges(changes);
    }
  }
}

柱塞示例

 类似资料:
  • 本文向大家介绍Angular4 ElementRef的应用,包括了Angular4 ElementRef的应用的使用技巧和注意事项,需要的朋友参考一下 Angular 的口号是 - "一套框架,多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)",即 Angular 是支持开发跨平台的应用,比如:Web 应用、移动 Web 应用、原生移动应用和原生桌面

  • Dockerized Angular 4 App (with Angular CLI) Build docker image $ docker build -t myapp . Run the container $ docker run -d -p 8080:80 myapp The app will be available at http://localhost:8080 You can e

  • Spring Boot + Angular 4 Boilerplate Quick start for Spring Boot + Angular 4 projects with JWT auth Includes: Front-end: angular-cli boilerplate files JWT authentication service Back-end: gradle build

  • mean-angular4-chat-app This source code is part of tutorial Building Chat Application using MEAN Stack (Angular 4) and Socket.io Step to run: Prepare Node.js and Angular CLI Clone this repo Run 'npm i

  • 我正在使用一个自定义管道,过滤数组的第一个字母表在字符串的基础上数组(电话簿样式)。每当我更改字母表参数时,管道就会返回经过过滤的数组,并使用*ngfor显示它。如果没有找到匹配项,则返回空数组,并且我的diplay are为空。 我希望,如果管道返回空数组,我的显示区域应该显示一个div'没有记录找到‘。我怎么能那么做。

  • 我从官方网站学习Angular 4,我通过ngModel学习了双向数据绑定部分。但是,只要我将[(ngModel)]添加到组件模板中,我的应用程序就会停止工作,即使FormsModule已导入模块中。ts文件。组件未加载 我正在使用Visual Studio代码<这是我的应用程序。组成部分ts 这是一个应用程序。单元ts AppComponent没有加载,只是显示 加载。。。