我一直在学习有关 LinkedIn Learning 的课程，但单击列表并让值填充表单对我不起作用。我是 Angular（和开发）的新手，如果这很愚蠢，或者我没有正确描述它，我深表歉意。
我有 2 个组件和一个 API 服务文件从 ASP.Net Core API 中提取数据：
- 列表代码
- 添加代码
- api
列表代码.component.html
<div class="card-body">
<p class="card-text">select a code from the list below.</p>
<ul class="list-group" *ngFor="let code of codes">
<a href="#" class="list-group-item list-group-item-action" (click)="api.selectCode(code)">{{code.codeName}}</a>
</ul>
</div>
列表代码.component.ts
ngOnInit() {
this.api.getCodes().subscribe(res => {
this.codes = res
})
}
添加-code.component.html
<form>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">:)</span>
</div>
<input type="text" class="form-control" [(ngModel)]="code.codename" name="codename" placeholder="code name">
<input type="text" class="form-control" [(ngModel)]="code.description" name="description" placeholder="description">
</div>
<button (click)="post(code)" class="btn btn-primary">Submit</button>
</form>
添加-code.component.ts
export class AddCodeComponent {
code = {}
constructor(private api: ApiService) {}
ngOnit() {
this.api.codeSelected.subscribe(code => this.code = code)
}
post(code) {
this.api.postCode(code)
}
}
api.service.ts
export class ApiService {
private selectedCode = new Subject<any>(); // holds reference to clicked item in list
codeSelected= this.selectedCode.asObservable(); // subscribe
constructor(private http: HttpClient) {}
getCodes() {
return this.http.get('http://localhost:58561/api/codes');
}
postCode(code) {
this.http.post('http://localhost:58561/api/codes', code).subscribe(res => {
console.log(res)
})
}
selectCode(code) {
this.selectedCode.next(code)
}
}
列出代码工作正常。
问题似乎只是单击并让列表中的代码填充添加代码表单中的值（它在视频教程中有效），但它对我不起作用。我假设我错过了一些明显的东西？
我做了一些阅读，每个人似乎处理 Subject Observables 略有不同，我显然只是错过了重点！
为简洁起见，我提供了我认为相关的片段。如果我忽略了一些重要的内容，请告诉我。
欢迎任何帮助！
干杯，亚当