我有这个错误在我的网站。类别标题没有被显示。Angular 版本14和Laravel 8。基本上页面拉类别标题是由用户选择他们的工作。用户选择他的选择一些类别，当任何项目得到由该用户完成，数据来与类别名称用户选择的主页滑块。

Uncaught TypeError: Cannot read properties of null (reading 'title')
    at IndexComponent_swiper_107_1_ng_template_0_div_0_Template

Angular 代码
.html程式码

<swiper [config]="swiperConfig"  [autoplay]="{delay:4000, disableOnInteraction: false}" [loop]="true">

          <ng-template swiperSlide *ngFor="let item of taskerList">

            <div class="col-lg-12 service 2" *ngIf="item.profile.categories.length > 0">
              <div class="one-line">
                <h5> {{ item.profile.categories[0].category.title }} </h5>
              </div>
              <div class="content-column d-flex">
                <!--    <div class="img"><img src="assets/img/user.jpg" width="150" class="img-fluid" /></div>-->
                <div class="img">
                  <img src="../../assets/img/avatar_men.png" class="img-fluid" />
                </div>
                <div class="content">
                  <p>{{ item.profile.my_jobs[0].what_do_you }}</p>
                </div>
                <div class="dvamt">${{ item.profile.my_jobs[0].budget }}
                </div>
              </div>
            </div>

          </ng-template>

          

        </swiper>

我的组件.ts代码

import { push } from 'firebase/database';
import { DataService } from './data.service';
import { Component, OnInit } from '@angular/core';
import Swiper, { Autoplay } from 'swiper';
import { urls } from '../../../environments/environment';
Swiper.use([Autoplay]);

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss'],
  providers: [DataService]
})
export class IndexComponent implements OnInit {

  picUrl = urls.BaseUrl + '/get-posts-image/';
  blogPost : any = [];

  taskerList : any = [];

  constructor(private ds : DataService) { }

  ngOnInit() {
    this.ds.list().subscribe((resp: any) => {
      if (resp.success) {
        this.blogPost = resp.data
      }
    })
    this.ds.getTaskersByCategory().subscribe((resp:any) => {
      if (resp.success) {
        let data = resp.data;
        //taskerList = [];
        data.forEach((item: any, i: number) => {
          if (item.profile.categories.length > 0) {
            if (item.profile.my_jobs.length > 0) {
              this.taskerList.push(item) 
            }            
          }
        });

        
        console.log(resp.data);
        
      }
    })
  }
  swiperConfig: any = {
    slidesPerView: '2',
    spaceBetween: 20,
    breakpoints:{      
       768:{            
      slidesPerView: 4,          
      spaceBetween: 30,
    }   
   }
}

}

我的数据.服务.ts代码

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { urls } from '../../../environments/environment';

@Injectable()
export class DataService {
    private baseUrl = `${urls.BaseUrl}`;
    private data = new BehaviorSubject<Array<any>>([{fetching: true}]);
    data$ = this.data.asObservable();

    constructor(public http: HttpClient) {
    }

    updateSource(newData: any) {
        this.data.next(newData);
    }

    updateItem(item: any, index: number): void {
        this.data.getValue()[index] = item;
    }

    addItem(item: any): void {
        this.data.getValue().push(item);
    }

    getItem(index: number) {
        return this.data.getValue()[index];
    }

    deleteItem(index: number) {
        const afterDel: any = [];
        this.data.getValue().forEach( (item: any, i: number) => {
            if (i !== index) {
                afterDel.push(item);
            }
        })
        this.updateSource(afterDel);
    }

    save(params: any): Observable<any> {
        const url = `${this.baseUrl}/register`;

        return this.http.post<any>(url, params);
    }

    update(params: any): Observable<any> {
        const url = `${this.baseUrl}/update`;

        return this.http.put<any>(url, params);
    }

    delete(index: number): Observable<any> {
        const url = `${this.baseUrl}/delete/${this.getItem(index).id}`;

        return this.http.delete<any>(url);
    }

    list(): Observable<any> {
        const url = `${this.baseUrl}/get-posts`;

        return this.http.get<any>(url);
    }

    getTaskersByCategory(): Observable<any> {
      const url = `${this.baseUrl}/get-tasker-by-category`;
    
      return this.http.get<any>(url);
    }
}

拉腊维尔法典

public function CategoryList()
    {
        $data = PostAdCategory::get();

        return R::Success('Job Skills', $data);
    }

    public function TaskerByCategory()
    {
        $data = User::with('Profile.Categories.category','Profile.MyJobs')
        ->where('user_type','tasker')
        ->get();

        return R::Success('Tasker By Category', $data);
    }