Angular 4 - 从 html 模板保存到模拟 json 数据库
Angular 4 - Save from html template to the mock json DB
Angular 4 应用程序,我有一个输入文本框,其中必须将值从模板存储到 json 数据,我将其用作模拟数据库。我在下面编写了服务和保存功能,但无法将其保存在 .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;
}
}
我的理解是否正确,您有一个本地 .json 文件,您正在从中读取数据并希望更新该数据?
据我所知,这是不可能的。您无法更新本地 JSON 文件。如果你想模拟数据库 get/post/put,你可以考虑使用 Angular inmemory Web API: https://github.com/angular/in-memory-web-api
这是专门为此目的设置的...模拟 back-end 服务器而不需要后端服务器。
我的大部分示例应用程序都使用它。
您可以在此处的 Angular 文档中看到它的运行情况:https://angular.io/tutorial/toh-pt6#simulate-a-data-server
Angular 4 应用程序,我有一个输入文本框,其中必须将值从模板存储到 json 数据,我将其用作模拟数据库。我在下面编写了服务和保存功能,但无法将其保存在 .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;
}
}
我的理解是否正确,您有一个本地 .json 文件,您正在从中读取数据并希望更新该数据?
据我所知,这是不可能的。您无法更新本地 JSON 文件。如果你想模拟数据库 get/post/put,你可以考虑使用 Angular inmemory Web API: https://github.com/angular/in-memory-web-api
这是专门为此目的设置的...模拟 back-end 服务器而不需要后端服务器。
我的大部分示例应用程序都使用它。
您可以在此处的 Angular 文档中看到它的运行情况:https://angular.io/tutorial/toh-pt6#simulate-a-data-server