After numerous attempts, I finally managed to resolve the issue by implementing the following solution:

1. To address the problem, I made a modification to the Fragment model in fragment.ts by converting Verse into an array. The line

public verses?: Verse;

was updated to

public verses?: Verse[];

2. Additionally, adjustments were made to the backend code (utilizing Django Rest Framework): I introduced the "fragments" field in the Chapter serializer and established a direct reference to the Fragment serializer. Consequently, I had to rearrange the order of the serializers in the serializer.py file, placing the Fragment serializer above the Chapter serializer since the Chapter serializer now referenced the FragmentSerializer class. This adjustment enabled the url associated with the ChapterList view (inherited from generics.ListAPIView) to return a nested JSON structure containing all fragments under each chapter, as well as all verses under each fragment - resulting in a double layer of nesting that was not present previously.

class FragmentSerializer(serializers.ModelSerializer):
    """
    Fragment in a chapter
    Returns chapter and book objects upward
    as well as all verses downward (reverse relationship) 
    """

    class Meta:
        model = Fragment
        depth = 2
        fields = [
            'id',
            'chapter_id',
            'surtitle',
            'title_string',
            'title_format',
            'verses',
        ]


class ChapterSerializer(serializers.ModelSerializer):
    """
    Chapters
    """
    # https://www.django-rest-framework.org/api-guide/serializers/#dealing-with-nested-objects
    fragments = FragmentSerializer(many=True)
    class Meta:
        model = Chapter
        depth = 1 # allows access to the whole book object
        fields = ['id', 'number', 'book_id', 'fragments',]

3. Subsequently, within the livre-detail.component.html file, I could now access every verse property using dot notation:

<div *ngFor= 'let chapter of chapters' >
  <span class="chapter_number">
    Chapter {{ chapter.number }}
  </span>
  <p></p>
  <div *ngFor= 'let fragment of chapter.fragments'>
    <p>{{ fragment.title_string }}</p>
        <div *ngFor= 'let verse of fragment.verses'>
            {{ verse.number }}
            {{ verse.text }}     
        </div>
        <p></p>          
  </div>
</div>

4. The final refined typescript file for livre-detail.component.ts is as follows:

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable, from} from 'rxjs';
import {map} from 'rxjs/operators';
import { Livre } from '../models/livre';
import { Chapter } from '../models/chapter';
import { Fragment } from '../models/fragment';
import {ResponseApi} from '../models/api';

import { LivreService } from '../services/livre.service';
import { ChapterService} from '../services/chapter.service';


@Component({
  selector: 'app-livre-detail',
  templateUrl: './livre-detail.component.html',
  styleUrls: ['./livre-detail.component.scss']
})
export class LivreDetailComponent implements OnInit {

  livres$!: Observable<Livre[]>;
  livres: Livre[] | undefined;
  livre: Livre | undefined;
  livre_name_ordinal: number | undefined;
  livre_name_text: string | undefined;
  
  chapters$!: Observable<Chapter[]>;
  chapters: Chapter[] | undefined;
  chapter: Chapter | undefined;
  chapter_number_as_string: string | undefined;
  
  fragments$!: Observable<Fragment[]>;
  fragment: Fragment | undefined;
  fragments: Fragment[] | undefined;
  fragment_id: number | undefined;
  fragment_id_as_string: string | undefined;
  title_string: string | undefined;

  constructor(
    private route: ActivatedRoute,
    private livreService: LivreService,
    private chapterService: ChapterService,
  ) { }

  ngOnInit(): void {
        // Acquire the short form of the book from the current route.
        const routeParams = this.route.snapshot.paramMap;
        const bookDiminutiveFromRoute = String(routeParams.get('bookDiminutive'));
        console.log(bookDiminutiveFromRoute)

        // Retrieve the name of the displayed book on this page
        this.livres$ = this.livreService.filterList(
          'diminutive', bookDiminutiveFromRoute).pipe(
            map((responseApi: ResponseApi<Livre>) => {
              return responseApi.results;
            }
          )
        );
        this.livres$.subscribe((livres: Livre[]) => {
          this.livres = livres;
          // Single book returned:
          this.livre = this.livres[0]
          this.livre_name_ordinal = this.livre.name_ordinal
          this.livre_name_text = this.livre.name_text
        });

        // List chapters belonging to the displayed book
        this.chapters$ = this.chapterService.filterList(
          'book_id__diminutive', bookDiminutiveFromRoute).pipe(
            map((responseApi: ResponseApi<Livre>) => {
              return responseApi.results;
            }
          )
        );
        this.chapters$.subscribe((chapters: Chapter[]) => {
          this.chapters = chapters
        });
      }
    }

If there are any suggestions for enhancing this approach, please feel free to share them!