Сервис возвращает два значения в объекте вместо одного

Question

Я возвращаю значение из объекта и вижу странную проблему, когда мой сервис возвращает два значения вместо одного:

здесь происходит ошибка:

navbar.component.html

{{ selectedTheme | json }}

navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { ThemeService } from "../theme/theme.service";
import { Theme } from "../theme/theme";

@Component({
  selector: 'ops-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent  {
  constructor(
    private themeService: ThemeService) {
  }

  get selectedTheme(): Theme {
    return this.themeService.selectedTheme;
  }
}

theme.service.ts

import { Injectable } from '@angular/core';
import { Theme } from "./theme";

@Injectable()
export class ThemeService {
  themes: Array<Theme> = [
    { name: "quick" },
    { name: "directory" }
  ];
  selectedTheme = this.themes[0];
}

Ожидаемый результат должен быть { name: "quick" }, а не { name: "quick" } { name: "quick" } верно?

---

Обновление - код для выпадающего

theme.component.html

<label>
  <select [(ngModel)]="selectedTheme" (change)="onChangeSelectedTheme()">
    <option *ngFor="let theme of themes" [ngValue]="theme">{{theme?.name}}</option>
  </select>
</label>
<p style="color: black">{{ theme }}</p>

theme.component.ts

import { Component, OnInit } from '@angular/core';
import { ThemeService } from "./theme.service";
import { Theme } from "./theme";

@Component({
  selector: 'ops-theme',
  templateUrl: './theme.component.html'
})
export class ThemeComponent implements OnInit {
  get themes(): Array<Theme> {
    return this.themeService.themes;
  }
  private selectedTheme: Theme;
  private theme: Theme;
  constructor(
    private themeService: ThemeService) {
  }

  ngOnInit() {
    this.selectedTheme = this.themeService.selectedTheme;
  }

  onChangeSelectedTheme() {
    this.themeService.selectedTheme = this.selectedTheme;
  }
}