标签: ngfor

我在我的项目中使用 Angular 2。我遇到了一个场景，其中我有一个项目列表，一个项目可能有子项目。我必须显示表格中的所有项目（包括子项目）。我对 tr 标签中的每个项目列表使用 *ngFor 。但是，由于我还必须显示子项目，因此我无法通过一个 *ngFor 来执行此操作。我可以采用什么方法来实现这一目标？正在寻找您的建议。请帮帮我。这是我想要显示的内容。

 items= [
    { name : 'bag', subitems: [{ name : 'pen' }, { name : 'pen1' }] },
    { name : 'chair' }
  ];

该表应具有以下行：

 bag
 pen
 pen1
 chair

请帮忙。

我有一个包含2个数组的对象数据（照片和注释来自服务器），我想用* ngFor显示它们，但是ngFor仅显示数组类型。

这是我的Ts文件：

this.comments=[];
// ...
  .subscribe((data) => {
    this.comments= data.comments;
    console.log("data: ", data);
    this.commentPhoto = data.Photo; 
    // I don't want to create another array 
    // I want to make commentPhoto and comments array in 1 Array to show them.

HMTL

<ion-row *ngFor="let cm of comments">

  <ion-col col-2 style="border:1px solid grey;">
    <img src="{{cm.photo}}" style="width:45px;height:45px;">
  </ion-col>

  <ion-col col-10 style="border:1px solid grey;">
    {{cm}}
  </ion-col>
</ion-row>

我该如何在1阵列数据照片中做到这一点 谢谢。

我似乎不明白为什么我的代码不起作用.我已经浏览了很多关于SO的帖子,我认为我的代码应该可行.这是我的代码:

ts文件

import { Component } from '@angular/core';

@Component({
    selector: 'my-array',
    templateUrl: './array.component.html',
})
export class ArrayComponent {
    private content: Test[];

    constructor() {
        this.content = [{
            heading: 'header',
            image: 'image',
            footerContent: 'footer',
            testData: [{
                title: 'title1',
                content: 'content1'
            }, {
                title: 'title2',
                content: 'content2'
            }]
        }]
    }
}

export class Test {
    heading: string;
    image: string;
    footerContent?: string;
    testData: TestItem[];
}

export class TestItem {
    title: string;
    content: string;
}

html文件

<div *ngFor="let test of content;">
    <h2>{{test.heading}}</h2>
    <div class="columnOne" id="accordion" …

我在component.html中有这个代码

<div class="dashboard-table-item row"
       *ngFor="let item of itemArray">
  <span>{{item.value == 'user' ? 'student' : item.value  | titlecase}}</span>
</div>

itemArray可以具有以下值之一:admin | 编辑| 我想要的用户无需修改itemArray输出:user - > student然后将其标记出来.

我知道我可以为'学生'改变'学生'并且它有效,但我的问题是为什么管道(|标题)不能与三元运算符一起工作(条件？'value1':item.value)Value1

我正在尝试更新 Angular 模板中输入字段的文本值。模板数据值在 NgFor 循环中生成，该循环从 Web 服务获取值。这是我的模板。

<ul *ngFor="let item of vals?.bu">
  <li>
    <table>
          <tr>
            <td><button type="button" class="btn btn-info">{{item?.id}}</button></td>
            <td><input type="text" [(ngModel)]="item.bcluster"></td>
            <td><input type="text" [(ngModel)]="item.bsector"></td>
            <td><button type="button" id={{item?.id}} (click)="update($event)">Update</button></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="text" [(ngModel)]="item.bgroup"></td>
            <td><input type="text" [(ngModel)]="item.bunit"></td>
            <td><button type="button" id={{item?.id}} (click)="delete($event)">Delete</button></td>
          </tr>
      </table>

  </li>
</ul>

我现在需要从模板中获取字段的值，即“bcluster、bsector、bgroup、bunit”到我的 TS 文件中，以便调用更新 API 调用（通过更新按钮上的点击事件），但是当我尝试获得未定义的值，因为我没有获得确切的行索引。我不知道如何做到这一点。

这是我的 TS 文件（只是想把值调出来）

  update(event) {
    console.log(this.bcluster);
  }

我正在尝试开发angular（version 6）应用程序，并且正在使用* ngFor inn迭代数组的地方。在HTML中，由于输出设计变得不均匀，我只想查看前8个元素。其余的元素基本上可以存储用于下一个按钮调用。我知道一种方法可以将我自己在其上调用* ngFor的数组限制为8，但这似乎比其他任何东西都更容易破解。任何帮助将非常感激。提前致谢。HTML ----->

<div *ngIf="!isloading" style = "padding-right: 300px; padding-left: 300px">
    <ng-container *ngIf="cards">
    <div *ngFor ="let card of cards">
    <app-card [card]="card" ></app-card>
    </div>
</ng-container>
</div>
<div class ="loader" *ngIf = "isloading">

JS --->

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
  @Input() cat :string; 
  @Input() sucat:string;



  //These 4 to represent current feed cat and supercat
  private curcat : string;
  private cursu : string;
  private page : number;
  //to  determine if page …

我有以下来自api的回复

[  
   {  
      "Cinema_strName":"dfdsfsd, Ahmedabad",
      "Cinema_strID":"HIWB",
      "Cinema_strBannerImg":"F&BCombo.jpg",
      "cinema_addr":"fsdfsdfr,Drive-in Road, 380052, ",
      "cinema_loc":"<iframe src=\"fsdfsdfdsfsfdsfdsffsf4!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a9f5938cfed5cd2!2sCarnival+Cinemas!5e0!3m2!1sen!2sin!4v1467809324170\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
      "cinema_mob":0
   }
]

我想从api获取iframe并附加到div map

为此,我在TS文件中写道

  this.common.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }
})

html模板:

<div class="map" *ngFor="let map of cinema">
     <div [innerHTML]="map.cinema_loc"></div>
 </div>

但是HTML并没有出现,但如果我正常绑定,就像下面那样

<div class="map" *ngFor="let map of cinema">
     <div>{{map?.cinema_loc}}</div>
  </div>

iframe以文本格式显示.

我如何附加为HTML？

请帮忙.

根据我在下面尝试过的解决方案

 this.common.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    this.cinema = this.sanitizer.bypassSecurityTrustHtml(this.cinema);

    console.log(this.cinema);
  }else{
      alert('Cinema …

我正在尝试动态填充表格，但无法弄清楚为什么这不起作用！

在这里，我得到了我的 json，我将对象数组保存在 customerArray 中。

export class AllCustomersComponent implements OnInit {
customerArray: any;


    constructor(private http : HttpClient ) {}

    ngOnInit() {
         this.http.get('http://www.mocky.io/v2/5be715ce2e00008a0016945e')
        .subscribe((data) => {
           this.customerArray = data;
          console.log(customerArray);
      }
    }
}

在这里，我试图用上述数组填充表格。

<table class="table">
        <thead>
          <tr>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>46</td>
            <td><i class="fas fa-edit"></i></td>
            <td><i class="fas fa-trash-alt"></i></td>
          </tr>
          <tr>
            <td *ngFor="let customer of customerArray">{{customer}}</td>
          </tr>
        </tbody>
      </table>

但我的表只是呈现这个：

[object Object] [object Object] [object Object] [object Object] [object …

我在HTML中有这段代码:

<!-- Toggle show hide -->
    <ng-container *ngFor="let plate of plates; let i=index">
      <button (click)="toggle(plate)">{{i}}. {{ buttonName }}</button>
      <span *ngIf="!show">
        <i>{{i}}</i>
        <h1>{{ plate.PlateNumber }}</h1>
      </span>
    </ng-container>

和角度代码:

toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if (this.show)
      this.buttonName = "Show";
    else
      this.buttonName = "Hide";
  }

它工作正常,但我需要当我点击按钮它隐藏该特定<span>容器.我添加了图像来说明我想要做什么,但是当我按下按钮时它会隐藏所有元素.

数据

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

我想将这些数据拆分为3列,并希望如下所示:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
    <li>10</li>
</ul>
<ul>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    ...
    <li>20</li>
</ul>
<ul>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    ...
    <li>30</li>
</ul>

使用ngfor时如何拆分数据？

<ul *ngFor="let item of arr">
    <li>{{item}}</li>
</ul>