Question

html

    <td>category:</td>
    <td>
      <input formControlName="category">
    </td>
  </tr>

  <tr>
    <td>writer:</td>
    <td>
      <input formControlName="writer">
    </td>
  </tr>

  <td colspan="2"> 
      <button [disable]="bookForm.invalid">Submit</button>
  </td>

</table>
</form>


<h3>View</h3>


<table>

  <tr>
    <th>Id</th><th>Name</th><th>category</th><th>writer</th>
  </tr>

  <tr *ngFor="let book of allBooks | async">

    <td>{{book.id}}</td>
    <td>{{book.name}}</td>
    <td>{{book.category}}</td>
    <td>{{book.wrter}}</td>

  </tr>

</table>

组件

import { Component } from '@angular/core';
import { Book } from './Book';
import { BookService } from './book.service';
import {FormGroup,FormBuilder,Validators} from '@angular/forms';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sam';

  dataSaved = false;

  bookFrom : FormGroup;

  allBooks : Observable<Book[]>;
  
  constructor(private formBuilder : FormBuilder, private bookService : BookService){}
  
  ngOnInit(): void {

    this.bookFrom=this.formBuilder.group({
      id : ['', [Validators.required]],
      name : ['', [Validators.required]],
      category : ['', [Validators.required]],
      writer : ['', [Validators.required]],
    })
    this.getSoftBooks();
  }

  getSoftBooks(){
    this.allBooks=this.bookService.getBooksFromStore();
  }

  onFromSubmit(){
    this.dataSaved=false;
    let book=this.bookFrom.value;
    this.createBooks(book);
    this.bookFrom.reset();


  }

  createBooks(book : Book){
    this.bookService.createBook(book).subscribe(book=>{
      this.dataSaved=true;
      this.getSoftBooks();
    })
  }
}

模块

import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http'

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';


import {BookService} from './book.service'
import {InMemoryWebApiModule} from 'angular-in-memory-web-api'

import { ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    InMemoryWebApiModule, 
    ReactiveFormsModule 
  ],
  providers: [BookService],
  bootstrap: [AppComponent]
})
export class AppModule { }


export interface Book{
    id: number;
    name: string;
    category : string;
    writer: String;
}

服务

import { Injectable } from '@angular/core';
import{HttpClient, HttpHeaders} from'@angular/common/http';
import {Observable} from 'rxjs';
import {Book} from './Book';


@Injectable({
  providedIn: 'root'
})
export class BookService {

  bookUrl="/api/books";

  constructor(private http : HttpClient){}

  getBooksFromStore():Observable<Book[]>{
    return this.http.get<Book[]>(this.bookUrl);
  }


  createBook(book : Book): Observable<Book>{
    let httpheader =new HttpHeaders()
    .set('content-Type','application/Json');

    let options={
      header : httpheader
    };

    return this.http.post<Book>(this.bookUrl,options);
  }
}

InMemoryDbService

import{InMemoryDbService} from 'angular-in-memory-web-api'; export class TestData implements InMemoryDbService{ createDb(){ let bookDetails=[ {id:100, name: 'anguular by saho' , category: 'angualr',writer:'chandan'}, ]; return {books: bookDetails}; } }

图书

export interface Book{
    id: number;
    name: string;
    category : string;
    writer: String;
}

在上面的代码中，我试图同时使用get方法和post方法
我正在使用角度9
我没有使用back API，而是使用了内置的有角度的inMermoryDbService
在colsoe中：无法加载资源：服务器以404（未找到）状态响应
在colsoe中：拒绝加载图像“ http：// localhost：4200 / favicon.ico”，因为它违反了以下内容安全策略指令：“ default-src'none'”。请注意，未明确设置“ img-src”，因此将“ default-src”用作后备。
无法加载资源：服务器的状态为404（未找到），我没有使用后置API，而是使用了内置的角度inMermoryDbService
（7）IN VSCODE错误：由于编译错误，无法编译入口点@ angular / common / http / testing（es2015为esm2015）： node_modules/@angular/common/http/http.d.ts：2823：22-错误NG6002：出现在HttpClientTestingModule的NgModule.imports中，但无法解析为NgModule类。

这可能意味着声明HttpClientModule的库（@ angular / common / http）未被ngcc处理，或者与Angular Ivy不兼容。检查是否有较新版本的库，如果有，则进行更新。还可以考虑与该库的作者进行检查，以查看该库是否与Ivy兼容。

角度获取和发布方法不适用于角度9

0 个答案: