Question

我在Angular 8应用中安装了ng bootstrap。现在，我试图显示来自API服务的特定类别ID的类别数据。因此，我将 app.module 中的ng模块导入如下

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

这是我获取值的地方， blog.service

getCategory(id: number) {
    return this.http.get<Category>(this.serverUrl + 'api/category/' + id).pipe(
      catchError(this.handleError)
    );
}

这是我的类别课程

export class Category {
    id: number;
    name: string;
    status : boolean;
}

这是我的打字稿功能，用于调用弹出功能。

open(content, id: number) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;

      if (id) {

        this.blogService.getCategory(+id).subscribe(
          res => {
            this.categoryForm.patchValue({
              categoryName: res.name,
              status: res.status,
              id: res.id
            });
          } 
        );
      }

    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

这是我的HTML表单

<form [formGroup]="categoryForm">
<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Update Category</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
        <div class="form-group">
          <label for="categoryName">Category</label>
          <div class="input-group">
            <input id="categoryName" class="form-control" formControlName="categoryName" name="categoryName">
          </div>
        </div>

    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>
</form>

这是我的示例JSON数据

{"id":"3","name":"Cosmetics","status":"1"}

这是我在类别组件脚本中使用的标题组件。

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { FormGroup, FormControl } from '@angular/forms';
import { Category } from "../../models/category";
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

我的app.module标头看起来像这样。

import { BrowserModule, Title} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { httpInterceptorProviders } from './http-interceptors/index';

但是类别名称未显示在文本框中。另外，我收到 Uncaught SyntaxError：无法在控制台中使用模块外部的import语句错误。我真的对Angular陌生。因此，请帮助我解决问题。

未捕获的SyntaxError：无法在模块外部使用import语句-在Angular 8中

0 个答案: