Я установил 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">×</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. Поэтому, пожалуйста, помогите мне решить проблему.