Angular 主题未更新表格

Question

我一直在学习 LinkedIn Learning 上的课程，但点击列表并让值填充表单对我不起作用。我是 Angular（和开发）的新手，如果这很愚蠢，或者我没有正确描述它，我深表歉意。

我有 2 个组件和一个 API 服务文件，从 ASP.Net 核心 API:

中提取数据

列表代码
添加代码
Api

列表-codes.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>

列表-codes.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 的方式都略有不同，我显然错过了重点！

为简洁起见，我提供了我认为相关的片段。如果我忽略了一些重要的内容，请告诉我。

欢迎任何帮助！

干杯，亚当

Answer 1

在您的 list-codes.component.ts 中，您只订阅一次由 api.service.getCodes() 返回的可观察对象，因为默认情况下 Observable 是冷的，因此当它完成时您会自动取消订阅。

为了让您的表单不断更新，您需要实施一些可以不断调用您的 service.getCodes().subscribe(blah) 来获取新数据的东西。

Angular 主题未更新表格

Angular subject not updating form

javascript

angular

subject-observer