在 angular 形式中使用局部变量

Question

我有一个在前端使用 angular 构建的 Web 应用程序，我有一个用于查看的组件，我在其中显示当前产品的所有评论，并且我正在使用一个表单来收集评论。这是表格在 html:

中的样子

 <form novalidate [formGroup]="reviewFormGroup" class="cnt-form">
      <div class="row">
        <div class="form-group">
          <label for="exampleInputName">
            Nume
            <span class="astk">*</span>
          </label>
          <input type="text" formControlName="name" class="form-control txt" placeholder="">
        </div>
      </div>
      <div class="row">
        <div class="form-group">
          <label for="exampleInputSummary">
            Titlu
            <span class="astk">*</span>
          </label>
          <input type="text" formControlName="summary" class="form-control txt" id="summary" placeholder="">
        </div>
      </div>
      <div class="row">
        <div class="form-group">
          <label for="exampleInputReview">
            Review
            <span class="astk">*</span>
          </label>
          <textarea formControlName="review" class="form-control txt txt-review"  id="review" rows="4" placeholder="" style="width:500px;"></textarea>
        </div>
      </div>
      <div class="action text-right">
        <button (click)="submitReview()" [disabled]="reviewFormGroup.invalid" class="btn btn-primary btn-upper">SUBMIT REVIEW</button>
      </div>
    </form>

为了创建表单，我在打字稿文件中使用了 FormGroup，并构建了一个函数来初始化它：

 reviewFormGroup: FormGroup;
 initializeForm() {
    console.log(this.lastReviewId);
    this.reviewFormGroup = this.fb.group({
      id: [(this.lastReviewId+1).toString()],
      name: ['', Validators.required],
      summary: ['', Validators.required],
      review: ['', Validators.required],
      productId: [this.product["id"]]
    });
  }

问题是我需要为评论的 ID 提供一个值，我发现提供正确值的唯一方法是从数据库中获取上次评论的 ID（我存储了所有SQL 服务器中的数据，我正在使用 C# 连接到数据库和 take/modify/insert 数据）。所以我创建了这段代码：

this.api['getLastReviewId']().subscribe((data: number) => {
  this.lastReviewId = data;
  console.log(this.lastReviewId);
});

从 api.service.ts 调用一个函数，该函数向后端发出请求并获取上次评论的 ID 值。我唯一的问题是，无论我把这段代码放在哪里，在 initializeForm() 函数中 this.lastReviewId 都有值未定义，即使在分配后该值在日志中显示正确。我试图在调用 initializeForm() 之前将此代码块放入 OnInit() 函数中，并将其放入 initializeForm() 从函数的第一行开始，但是当我调用 console.log(this.lastReviewId)[= 时它仍然给我未定义的值31=] 来自 initializeForm().

我是不是做错了什么？我真的不明白为什么它没有分配正确的值，即使它在那里。

Answer 1

我怀疑您的 initializeForm() 在 API 调用之前收到调用。尝试调用 subscribe

下的 initializeForm() 方法

Answer 2

在 SQL 服务器中配置您的 table 以自动生成 ID，这样您的应用程序层就不需要管理该值。您将运行遇到的问题是您无法更改现有列并将其设置为标识。因此，如果可能的话，最好重建 table 并将 'id' 设置为标识列

CREATE TABLE [dbo].[TableName]
(
[id] [int] NOT NULL PRIMARY KEY IDENTITY(1, 1),
[name] [varchar(255)] NOT NULL,
[summary] [varchar(255)] NOT NULL
... other columns 
)

完成此操作后，您在创建记录时将无需触及此列

在 angular 形式中使用局部变量

use local variables in angular forms

web-applications

typescript

angular