Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля - в Angular 8 - PullRequest
0 голосов
/ 05 ноября 2019

Я установил ng bootstrap в своем приложении Angular 8. Сейчас я пытаюсь отобразить данные категории определенного идентификатора категории из службы API. Поэтому я импортировал модуль ng в app.module следующим образом

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)
    );
}

Это мой класс Category

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: Невозможно использовать оператор импорта вне ошибки модуля в консоли. Я действительно новичок в Angular. Поэтому, пожалуйста, помогите мне решить проблему.

...