小编rha*_*lka的帖子

在Angular中，* ngFor是否需要trackBy函数？我在这里，这里，这里和这里看到了几篇文章，说使用trackBy可以提高性能并具有更好的内存管理。但是我想知道trackBy是否是一种改进，那么为什么它不是默认行为呢？这是默认行为，我正在查看的所有内容都已过时了吗？

如果不是默认行为，则我的项目在90个组件中大约有90个* ngFor，我想知道是否有一种方法可以使用trackBy，而我并未将以下函数包含90次。我也想避免添加服务并将其导入90次。

的HTML

<mat-option *ngFor="let l of list; trackBy: trackByFn" [value]="l.id">
   {{l.name}}
</mat-option>

TS

trackByFn(index, item) {
    return index
}

抱歉，如果这个问题很琐碎，我对 Angular 和 Web UI Kingdom 很陌生

我目前正在查看这个示例项目：https ://github.com/marinantonio/angular-mat-table-crud

我正在替换列的创建方式（从静态到动态），并且表布局变成了难以阅读的内容。我无法理解这是如何/为什么发生的。我创建专栏的方式有何不同？但是，最重要的是，我该如何解决它？

这是我所拥有的：

组件.html：

<ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
  <td mat-cell *matCellDef="let row"> {{row[column.name]}} </td>
</ng-container>

组件.ts

columns: Array<any> = [
    { name: 'id',         label: 'ID',         cell: (element: any) => `${element.id}` },
    { name: 'title',      label: 'Title',      cell: (element: any) => `${element.title}` },
    { name: 'state',      label: 'State',      cell: (element: any) => `${element.state}` },
    { name: 'url',        label: 'Url',        cell: (element: any) => `${element.url}`},
    { name: …

我正在使用Angular 5 版本 1.4.2 的ng-select库。我有一个包含大约 700 条记录的大型数据集。我选择的下拉列表中的数据看起来不错，但仅在几秒钟后才出现。有没有办法让它更快地出现？

我研究过虚拟滚动。这是一个选择吗？我还需要能够进行搜索，在https://ng-select.github.io/ng-select#/virtual-scroll的演示中，我不确定这是否有效。

这是我的选择框的 HTML：

<ng-select [items]="clients| async | orderBy : ['name']"
           [closeOnSelect]="true"
           [searchable]="true"
           bindValue="id.clientID"
           bindLabel="name"
           placeholder="Select a Client..."
           notFoundText=""
           [(ngModel)]="selectedClient"
           name="client">
</ng-select>

这是我的 Angular 组件代码，它在初始化时加载此数据：

ngOnInit() {
    this.clients = this.clientService.getClients();
}

客户定义为

clients: Observable<Client[]>;

简单的三元运算符可以在 html 中像这样使用：

<div> {{ showStringOneFlag ? 'Display String 1' : 'Display String 2' }} </div>

这可能比在 javascript 中设置一个字符串变量 20 次更方便。

我的问题是三元运算符是否太昂贵而无法在每个摘要周期执行？是否应该避免或少用此功能？它在消化循环中的足迹是否很小并且无需担心？我在任何地方寻找答案时都发现它在速度方面与 if/else 语句相当，但在 html 中并没有真正与 if/else 语句等效的东西。

我正在编辑别人的.sh，我遇到了这一行

if [ "$ACTION" = "install" -o \( "$ACTION" = "start" -a -z "$APPS" \) ]

我的理解是：

• "$ACTION" = "install"正在检查脚本的操作是否是安装
• -o是 OR 运算符
• "$ACTION" = "start"正在检查脚本是否正在启动另一个程序
• -a是 AND 运算符
• -z "$APPS"正在检查 $APPS 是否为空字符串

我不知道什么\( "$ACTION" = "start" -a -z "$APPS" \)意思。反斜杠括号 ( \( <action> \)) 是开始/结束注释吗？我查看了这里，这不是我所期望的正常条件分组。

编辑：为了帮助代表我认为正在发生的事情，这在大多数其他编程语言中是等效的。因为我对 bash 相当陌生，所以开放式结局||对我来说并不奇怪。

if [ "$ACTION" = "install" -o \( "$ACTION" = "start" -a -z "$APPS" \) ]

我有自动完成输入

<

<div formArrayName="addresses"> 
  <div class="row" 
       *ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index" 
       [formGroupName]="i">
    <mat-form-field>
      <input type="text" 
             class="form-control" id="address"
             formControlName="address" 
             matInput 
             [matAutocomplete]="auto"
             (keyup)="getESRI($event.target.value)"
             (focusout)="bindLocation($event.target.value)">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of testLocation"
                    [value]="option.text">
           {{ option.text }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field> 
  </div>
</div>

"testlocation":[{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true},{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true}]

当我尝试添加值[value] ="option.magicKey时,它在输入option.magicKey中显示,当我选择选项时.我只需将option.magicKey作为值,并选择option.text作为输入选项.其他如何添加option.magicKey作为bindLocation($ event.target.value)函数的参数？

我有这个包含Adress的接口,它是一个对象,如何通过*ngFor获取它的值？

export  interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
}


export interface Address {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
  }

<div *ngFor="let oneuser of table">
  <p>{{oneuser.id}}</p>
  <p>{{oneuser.name}}</p>
  <p>{{oneuser.username}}</p>
  <p>{{oneuser.email}}</p>
  <hr>
</div>