标签: ngfor

我正在尝试在导航栏按钮上使用:first-child，但由于某种原因它适用于所有导航按钮。\n同样适用于:last-child.

html:

<div fxLayout="row" class="top-padding-30">\n  <ul fxFlex="100" *ngFor="let tab of navigation_buttons;">\n    <li class="tab tab-text" [ngClass]="{\'active-tab\': tab.isSelected == true}" (click)="selectTab(tab)" fxLayoutAlign="center center">{{tab.name}}</li>\n  </ul>\n</div>\n

CSS：

.tab {\n  background-color: #d2d2d2;\n  padding: 18px;\n  cursor: pointer;\n  margin-right: 3px;\n  &.active-tab {\n    background-color: #452f46;\n    color: #ffffff;\n  }\n  &:first-child {\n    border-radius: 0px 15px 15px 0px;\n  }\n  //   &:last-child {\n  //     border-radius: 15px 0px 0px 15px;\n  //   }\n}\n

TS：

navigation_buttons = [{\n  isSelected: false,\n  name: \'\xd7\x9c\xd7\x91\xd7\xa0\xd7\x94 (6%)\'\n}, {\n  isSelected: …

我是 Angular 的新手，所以我需要使用 ngFor 将值从组件传递到 a 中的另一个组件。假设有两个组件：日志和日志。我的logs.component.html是：

//iterane on a list that I have created 
    <app-log *ngFor="let log of listLog;let i= index"></app-log>

在我的 log.component.html 中：

//Something like this
<p>The server timestamp {{ log[i] }}</p>

如何在 log.component.html 中传递日志值以及如何打印它？

我已将 ngFor 放入一个 div 中，该 div 显示包含 HTML 的对象，该对象来自我的数组集合。但我不希望我的对象（包含 html 节点（HTMLElement））应该包装在 div 中，但它应该在没有 div 的情况下显示，我在其中放置了ngFor指令。

这是我的html

<div *ngFor="let mt of mappingTable"  [innerHTML]="mt?.htmlElement.outerHTML  | escapeHtml: 'html'  ">
 </div>

对于inner [innerHTML]，没问题，但在输出中我看到htmlElement.outerHTML被包装在div中。

我已经尝试过<ng-container>，但在网页上显示原始 html

我在 ngFor 循环中显示一个对象列表，我想用管道过滤这个列表。

我的研究使我想到了这一点：

filter-by.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';
import { UserLink } from '../_models/user-link';

@Pipe({
    name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
    transform(items: User[], isActive: boolean): any {
        if (!items) { return []; }
        return items.filter(x => x.isActive === isActive);
    }
}

在 my.component.html 中：

<tr *ngFor="let item of items$|async|filterBy: {isActive: false}">
    <td>{{item.firstname}}</td>
    <td>{{item.lastname}}</td>
    <td>{{item.age}}</td>
</tr>

但结果不是我所期望的：我的数组是空的。

我想念什么才能让它发挥作用？

我在这个 stackblitz ( https://stackblitz.com/edit/angular-46atle ) 中尝试了我的解决方案并且它有效。但我仍然无法让它在我的项目中工作。我检查了对象的属性和代码的其余部分，但看不到我的错误在哪里

[编辑]

问题解决了！我正在过滤的对象和我认为我正在过滤的对象之间缺少一个演员表。！初学者的错误！

感谢您的建议！

我的角度应用程序中有以下 html

                <div class=\'order-list\'>\n                    <div *ngFor="let order of orders">\n                        <div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{\'last\': i === orders.length - 1}" (click)="toggle(order)">\n                        <div class="col-sm-3 my-auto">{{order.date}}</div>\n                        <div class="col-sm-3 my-auto">Livr\xc3\xa9e</div>\n                        <div class="col-sm-3 my-auto">{{order.order_number}}</div>\n                        <div class="col-sm-2 my-auto"><span class=\'price\' [innerHTML]=\'order.overallAmount | currencyFormat\'></span></div>\n                        <div class="col-sm-1 my-auto p-0">\n                            <i class="fas fa-plus toggle-icon" *ngIf="toggled !== order.functional_id"></i>\n                            <i class="fas fa-minus toggle-icon" *ngIf="toggled === order.functional_id"></i>\n                        </div>\n                        <div class=\'row slider\' [ngClass]="{\'expanded\': toggled === order.functional_id}">\n                            <div class=\'row ciev-row last extra-data\'>\n                                <div class=\'col-sm-3 my-auto\'>Produits</div>\n                                <div class=\'col-sm-3 my-auto\'>Prix HT</div>\n                                <div class=\'col-sm-3 …

我从 API（服务器）动态生成了不一致的对象数组。

例如：

array = [
 {name: 'blah', age:2},
 {status: 'pending', date: '20-20-2020'},
 {blah: 'foo', google: 'bar'},
 {apple: 'android', microsoft: 'eeewww'}
]

这个数组可以是具有不同键和值的任何东西。

我如何遍历它以显示中的值ngFor？

我目前正在做的事情：

this.printArray = JSON.stringify(JSON.parse(this.array), null, 4);

<div *ngFor="let print of printArray">
  {{print}}  // it prints the array like {"name": blah, "age": 2} but i don't want it in this way
</div>

我创建了一个动态文本框，ngFor其中通过在另一个文本框中键入数字来生成文本框的数量。

HTML。

    <div class="input-group col-sm-3">
        <span class="input-group-addon">Num of columns: </span>
        <input class="form-control"
               (change)="addColumnLength($event.target.value)"
               [(ngModel)]="workModel.columnLength"
               placeholder="Enter num of columns">
    </div>
</div>
<div class="column-content col-sm-3">
    <div class="input-group col-sm-12" *ngFor="let column of workModel.columnData; let i= index ">
        <span class="input-group-addon">Column {{i + 1}} </span>
        <input class="form-control"
               [value]="workModel.columnData[i]"
               (change)="assignColumnData($event.target.value, i)">
    </div>
</div>

这是我的 .ts 文件。

 addColumnLength( length : number ) {
    this.workModel.columnData = [];
    for ( let i = 0; i < length; i++ ) {
        this.workModel.columnData[i] =  undefined;
    }
}

assignColumnData( length …

我正在尝试创建一个图像模式，如果您单击图像，它会创建放大的预览。我有来自服务的三个图像，我使用 *ngFor 显示所有三个图像。但是，当单击一张图像时，所有三张图像都会放大。我知道我可以使用 $(this) 这样点击函数就知道要放大哪个图像网址，但我不确定具体如何实现。任何帮助将不胜感激。如果我需要安装 jquery 才能使其正常工作或导入它，请告诉我。谢谢！

成分

import { Component, OnInit } from '@angular/core';
import { RandomdogpicsService } from './randomdogpics.service';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent implements OnInit {
  picData: any;
  title:string  = 'Random dog pics';
  showModal: boolean = false;
  show()
  {
    this.showModal = true; // Show-Hide Modal Check
    
  }
  //Bootstrap Modal Close event
  hide()
  {
    this.showModal = false;
  }
  constructor(private threeRandomData: RandomdogpicsService){}
  ngOnInit() 
  {
    this.threeRandomData.getThreeRandom().subscribe((result) => {
      this.picData = result
    })
  }
} …

我在项目中遇到了一个问题， *ngFor 无法在模态组件内工作，而可以在其他任何地方工作。我在应用程序组件中导入 BrowserModule，在其他地方导入 commonModule。没有拼写错误。我确信该声明已明确声明。

错误是：

无法绑定到“ngForOf”，因为它不是“li”的已知属性

有什么帮助吗？