Angular11 单击时无法获取angular 11中的属性

首先，让我告诉你，我是新手

我想要达到的目标是什么

我正在做一个画廊过滤点击按钮。因此，我单击按钮，无法获取元素属性，这表明未定义getAttribute（）

请告诉我我做错了什么

下面是代码

portfolio.component.ts

portfolio.component.html

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  filter(event?: MouseEvent) {
    console.log('lkasjdfklkl;fsakfjsg')

    console.log(event?.target)
    console.log(event?.target.getAttribute('data-filter'))
  }

  ngOnInit(): void {

      
    
  }

}

<div class="filter-actions">

    <ul class="list-inline">
        <li class="list-inline-item"> <a class="filter-button active" data-filter="all" href="javascript:void(0);" (click)="filter($event)">ALL</a></li>
        <li class="list-inline-item"> <a class="filter-button" data-filter="admin" href="javascript:void(0);">ADMIN</a></li>
         <li class="list-inline-item"> <a class="filter-button" data-filter="designs" href="javascript:void(0);">DESIGNS</a></li>
          <li class="list-inline-item"> <a class="filter-button" data-filter="photography" href="javascript:void(0);">PHOTOGRAPHY</a></li>
          <li class="list-inline-item"> <a class="filter-button" data-filter="wordpress" href="javascript:void(0);">WORDPRESS</a></li>
     </ul>
  </div>