代码之家  ›  专栏  ›  技术社区  ›  user8819437

Angular 4-从html模板保存到模拟json数据库

  •  0
  • user8819437  · 技术社区  · 7 年前

    Angular 4应用程序中,我有一个输入文本框,其中的值必须从模板存储到json数据,im将其用作模拟数据库。我已经在下面编写了服务和保存功能,但无法将其保存在中。json文件。想法或帮助它工作。

    <ng-container *ngFor="let data of displayReasonCodes$ | async;let i = index">
    <tr class= "row-break">
     <td>  
        <form>
        <form-group>
      <textbox [readOnly]="isEditable" ngModel="{{data .ReasonCode}}"  name="textbox" ></textbox>
            </form-group>
    </form>
    </td>
    <td>
    <form>
    <form-group>
     <textbox  [readOnly]="isEditable" ngModel="{{data .Description}}" name="textbox1" ></textbox>
    </form-group>
     </form>
      </td>
    
    services.ts
    @Injectable()
    
    
    export class CodesService{ 
        constructor(private httpClient:HttpClient, private apiUrlService : ApiUrlService){}
    
    createReasonCodes(data:IReasonCodes){
            var url = this.apiUrlService.getPostfix("/Codes");
            return this.httpClient.post<IPostHttpResponse>(url,codes);
        }
    
       COMPONENT.TS
    save(){
    
      let newreasoncodeDefinition: IReasonCodes = this.poolModel.get();
    
      this.rCodesActions.createCodes(newreasoncodeDefinition).
      subscribe(definitionResponse => {
        if(definitionResponse.responseCode ===1 ){
          console.log("The ReasonCode " + newreasoncodeDefinition.ReasonCode + "Created Successfully");
    
        }
      })
    
    
    } 
    
    ReasonCode fromUIModel.ts
    
    poolModel: ReasonCodeFormUIModel;
    ngOnInit (){
          this.poolModel = new ReasonCodeFormUIModel();
    
    public get() :IReasonCodes {
        let reasonCodes = new ReasonCodes();
        reasonCodes.Code= this.reasoncode;
        reasonCodes.Description = this.description;
    return reasonCodes;
    }
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   DeborahK    7 年前

    我是否正确理解你有一个当地人。您正在从中读取数据并希望更新该数据的json文件?

    据我所知,这是不可能的。无法更新本地JSON文件。如果要模拟数据库get/post/put,可以考虑使用Angular inmemory Web API: https://github.com/angular/in-memory-web-api

    这是专门为此目的设立的。。。在不需要后端服务器的情况下模拟后端服务器。

    我的大多数示例应用程序都使用它。

    您可以在此处的角度文档中看到它的作用: https://angular.io/tutorial/toh-pt6#simulate-a-data-server