angularjs - 角度获取和发布方法在角度 9 中不起作用

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

内存数据库服务

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

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

这可能意味着声明 HttpClientModule 的库 (@angular/common/http) 没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新。还可以考虑与图书馆的作者核实，看看图书馆是否应该与 Ivy 兼容。

标签： angularjstypescript