相关疑难解决方法(0)

在这种情况下,我正在向视图中显示学生列表(数组)ngFor:

<li *ngFor="#student of students">{{student.name}}</li>

每当我将其他学生添加到列表中时,它都会更新.

然而,当我给它一个pipe到filter由学生的名字,

<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>

在我在过滤学生姓名字段中输入内容之前,它不会更新列表.

这是plnkr的链接.

Hello_world.html

<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
    <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>

sort_by_name_pipe.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    } …

由于限制过滤器已从Angular 2+中删除,如何对简单的*ngFor语句应用限制？

<div *ngFor="#tweet of singleCategory">
  {{ tweet }}
</div>

我不希望*ngFor语句循环遍历singleCategory的所有元素,我想将其限制为仅2个结果.我相信可以使用Custom Pipes完成,但我不知道如何实现它.

谢谢.

我正在尝试使用*ngFor模板内部迭代数组并使用*ngIf搜索基于键的元素.现在,当条件与键匹配时,我想打破*ngFor.我想知道angular2中是否有任何选项可以ngFor根据条件打破循环.

我循环遍历一个有6个对象的数组,并使用ngFor,我想只循环4个元素.我怎么能这样做？

<div class="item active" *ngFor="#data of lengthArray">
 content 
</div>

在LengthArray我有6但是如何循环到4个记录？

而且我想从另一个div中的第4条记录循环到第6条记录.我怎样才能从第4条记录开始？

可以在angular2的模板中使用以下内容，

for int a = 0; a < numberTest; a++

此numberTest在代码组件中：

numberTest: number = 5;

和模板，像这样，最好说明一下我的意思：

<li *ngFor="#int a = 0; a < numberTest">

我知道可以使用数组来解决，例如进行迭代：

<li *ngFor="#item of items">

但是我的问题是，如果可能的话，请在模板中创建for，该模板使用变量组件获取值条件，希望我能很好地解释。

我有一个要*ngFor在HTML页面上显示的对象列表。现在，用户与U​​I进行交互并更改原始值之一（布尔值，从false变为true）。

根据我的理解，*ngFor仅当列表对象被完全修改（即删除并再次添加到列表）时，才会呈现更改。如果我对这个概念是正确的，那么您能否建议一种方法来反映基本类型的更改，而无需重新初始化组件或修改对象引用。

例如：

  <div *ngFor="let item of list">
        <md-checkbox [(ngModel)]="item.selected"></md-checkbox>
  </div>

用户单击该复选框，但是在服务器进行某些验证后必须选中该复选框。因此，假设需要取消选中该复选框，并且用户会在小吃店收到消息。因此，我遍历列表并将其修改item.selected为false。但是，当我在对象项中修改了原始类型selected（boolean）时，更改未反映出来。因此，如何在不重新加载或初始化页面的情况下呈现新值。

如果需要更多输入，请告诉我。

问题

在下面的代码中,我试图根据它们的类别显示它们的所有Projects(对象)Tab.

类别必须是等同的.

编辑:如果不清楚,请看这里.

这是我的代码:

<md-tab-group>
    <md-tab *ngFor="let tab of tabs">

        <template md-tab-label>
            {{tab.name}}
        </template>

        <h1 *ngFor="let project of projects" *ngIf="tab.category == project.category">
            Project Name: {{project.name}}
        </h1>

    </md-tab>
</md-tab-group>

我想要实现的目标:

我正在尝试迭代选项卡并将每个选项卡的名称添加到选项卡的"模板".

然后,我试图遍历项目,如果项目的类别与选项卡的类别匹配,那么它将显示在选项卡下.

我

由于某种原因,它似乎不起作用.难道我做错了什么 ？
对不起,我的逻辑,过去两天都醒了!

我想基于字符串中存在特定子字符串的事实来过滤Angular 4中的ngFor循环中的项目

对于Ex:

agents[] = [
  { id: 11, name: 'Agent 0', email:'admin@ab.com' },
  { id: 12, name: 'Agent 1', email:'admin@ab.com'},
  { id: 13, name: 'Agent 2', email:'admin@ab.com' },
  { id: 14, name: 'Agent 3', email:'admin@ab.com' },
  { id: 15, name: 'Agent 4', email:'admin@ab.com' },
  { id: 16, name: 'Agent 5', email:'admin@ab.com' },
  { id: 17, name: 'Agent 6', email:'admin@ab.com' },
  { id: 18, name: 'Agent 7', email:'admin@ab.com' },
  { id: 19, name: 'Agent 8', email:'admin@ab.com' },
  { id: 20, …

我在 in-memory-data.service.ts 中有这些数据：

import {InMemoryDbService} from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const values = [
  {
    id: 0,
    title: 'Calculus',
    author: 'John Doe',
    date: '2018-05-15',
    content: 'Random text',
    category: 'Science'
  },
  {
    id: 1,
    title: 'Bulbasaur',
    author: 'John Doe',
    date: '2000-09-14',
    content: 'Random text',
    category: 'TV shows'
  },
  {
    id: 2,
    title: 'Fourier Analysis',
    author: 'John Doe',
    date: '2014-01-01',
    content: 'Random text',
    category: 'Science'
  }
];

return {values};
  }
}

目前我正在我的一个组件中显示数据：

<ol class="list-unstyled mb-0">
  <li *ngFor="let …

假设我有一个数据数组如下.

datas : [
  {
    nums : [121,222,124,422,521,6312,7141,812]
  },{
    nums : [121,222,124,422,521,6312,7141,812]
  },{
    nums : [121,222,124,422,521,6312,7141,812]
  }
]
nums = [121,222,124,422,521,6312,7141,812]

我想在序列号之后显示数组中的偶数,如下所示.

1. 222
2. 124
3. 422
4. 6312
5. 812
6. 222
7. 124
8. 422
9. 6312
10. 812
11. 222
12. 124
13. 422
14. 6312
15. 812

但我无法想出在"偶数"检查后设置索引的方法.目前,我使用以下代码显示文本.

<div *ngFor="let data of datas">
  <div *ngFor="let num of data.nums; let rowIndex = index">
    <div *ngIf="num % 2 == 0">
      {{rowIndex+1}}. {{num}}
    </div>
  </div>
</div>

但它显示出来

2. …

在我的Angular 2应用程序中，我想知道是否有一种方法可以遍历数组，同时还可以过滤*ngFor块中的某个属性。所以语法看起来像这样：

<ng-template *ngFor="let flag['completed === false'] of service.flags">
    <span class="standard-flag" 
        [class.hold-flag]="flag?.flagType === 'hold'">Flag
    </span>
</ng-template>

因此，基本的逻辑是，对于数组中存在的每个对象（“ flag”是一个对象），将“ completed”属性设置为“ false”，则返回该值。而不是首先遍历数组，然后使用* ngIf进行进一步过滤，如果可以同时在* ngFor块中做这件事会很好（在我的特定情况下非常有用）。可能？

我之所以对这种构造特别感兴趣，是因为我只想返回“ completed”为“ false”的第一个值，并且可以使用* ngFor中的“ let i = index”来处理它。在这种情况下阻止。但是我不想返回所有标志对象中的第一个，只是返回“ completed”属性设置为“ false”的标志对象。