小编Abd*_*fay的帖子

我需要创建一个函数来顺序进行HTTP调用,以便将一个调用的响应用于其他调用,例如从第一次调用获取用户的IP地址,并使用该IP在第二次调用中注册用户.

演示代码:

registerUser(user: User) {
    this.utility.getIpAddress()
    .subscribe(data => {
        this.ipAddress = data.ip;
    });
    const body = {
        UserName: user.UserName,
        Email: user.Email,
        //...
        UserIP: this.ipAddress,
    }
    return this.http.post(this.registerAPI, body);
}

我keyvalue用简单的代码测试Angular的管道:

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

@Component({
  selector: 'app-root',
  template: `<div *ngFor="let prop of testObj | keyvalue">
      <div>key: {{prop.key}}</div>
      <div>value: {{prop.value}}<div>
    </div> `
})
export class AppComponent {
  testObj = { id: 1, name: "Abdul Rafay" }
}

但它给了我这个错误:

模板解析错误:无法找到管道'keyvalue'(testObj | keyvalue的"prop")> key:{{prop.key}} value:{{prop.value}}"):ng:/// AppModule /AppComponent.html@0:17评估src/main.ts引导应用程序

我错过了什么吗？这是我的Stackblitz

是否有任何替代或解决方法可以实现 React 中 Angular 模板引用变量的工作？

在 Angular 中，模板引用变量通常是对模板中 DO​​M 元素的引用。您可以使用井号 (#) 声明引用变量。

例如，#firstNameInput 在<input>元素上声明firstNameInput 变量。

<input type="text" #firstNameInput>
<input type="text" #lastNameInput>

之后，您可以在模板内的任何位置访问该变量。例如，我将变量作为事件的参数传递。

<button (click)="show(lastNameInput)">Show</button>


show(lastName){
    console.log(lastName.value);
}

当我安装Material icon主题并禁用它时,我的VS Code中的文件图标消失了,但现在当我启用此扩展或重新安装时,图标不会出现.即使是在安装扩展程序之前存在的默认VS代码文件图标也会以某种方式消失.

我正在动态创建表单字段，ngFor并且每个字段都有唯一的name属性。我正在努力验证他们。我的示例代码：

<div *ngFor="let dimension of lstShippingDimensions; let i = index" class="dimension-item">
        <input type="text" name="units-{{i}}" [(ngModel)]="dimension.units" 
        class="first-f" placeholder="# of units" required>
        <input type="text" name="width-{{i}}" [(ngModel)]="dimension.width" 
        class="second-f" placeholder="W" required>
        <input type="text" name="height-{{i}}" [(ngModel)]="dimension.height" 
        class="third-f" placeholder="H" required>
        <input type="text" name="length-{{i}}" [(ngModel)]="dimension.length" 
        class="forth-f" placeholder="L" required>
        <select class="five-f" name="unitType-{{i}}" [(ngModel)]="dimension.unitType" 
        required>
            <option>inches</option>
            <option>feet</option>
        </select>
        <div *ngIf="!units-{{i}}.valid && units-{{i}}.touched" class="text-danger text-left">
            <small *ngIf="units-{{i}}.errors.required">Field is required.</small>
        </div>
    </div>