Угловая тема не обновляет форму

Question

Я прошел курс обучения в LinkedIn Learning, но щелчок по списку и заполнение форм значениями не работают для меня. Я новичок в Angular (и разработке), поэтому извиняюсь, если это глупо, или я не правильно описал это.

У меня есть 2 компонента и файл службы API, извлекающий данные из ASP.Net Core API:

1. Список-коды
2. Добавить код
3. 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)
    }
}

Распечатка кодов работает отлично.

Кажется, что проблема заключается в том, что код в списке заполняет значения в форме кода добавления (это работает в видеоуроке), но у меня это не работает. Я предполагаю, что пропустил что-то очевидное?

Я немного почитал, и все, кажется, воспринимают предметные наблюдаемые немного по-другому, и я, очевидно, просто упускаю суть!

Для краткости я предоставил фрагменты, которые я считаю актуальными. Если я упустил что-то важное, пожалуйста, дайте мне знать.

Любая помощь приветствуется!

Ура, Адам

Answer 1

В вашем list-codes.component.ts Вы подписываетесь только на наблюдаемую, возвращенную вашим api.service.getCodes() один раз, потому что Observable является холодным по умолчанию и, следовательно, когда он завершается, вы автоматически отписываетесь.

Чтобы ваша форма постоянно обновлялась, вам нужно внедрить что-то, что будет вызывать ваш service.getCodes().subscribe(blah) чтобы получить новые данные.