In mat-table data are not displaying

Question

while checking in console data is showing,but in mat-table data is not displaying,How to solve this?Plz check this and guide me,in console values are showing in dataSourceDns but it is not displaying in table.i am new to angular guide me

HTML

<table mat-table [dataSource]="dataSourceDns" class="mat-elevation-z8">
    <ng-container matColumnDef="verify">
      <th mat-header-cell *matHeaderCellDef>
        Verified
      </th>
      <td mat-cell *matCellDef="let element">
        <div *ngIf="element.status == 'true'" class="dark-blue"> <i class="fas fa-check"></i></div>
        <div *ngIf="element.status == 'false'" class="dark-red"> <i class="fas fa-times"></i></div>
        <div *ngIf="element.status == 'unverified'" class="dark-red"> <i class="fas fa-times"></i></div>
      </td>
    </ng-container>
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef>
        Type
      </th>
      <td mat-cell *matCellDef="let element">
        {{element.type}}
      </td>
    </ng-container>
    <ng-container matColumnDef="host">
      <th mat-header-cell *matHeaderCellDef>
        Host
      </th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field class="textsize">
          <textarea matInput [(ngModel)]="element.name" [ngModelOptions]="{standalone: true}" #hostname
            mdTextareaAutosize minRows="2" style="height: 40px;">
</textarea>
        </mat-form-field>
      </td>
    </ng-container>
    <ng-container matColumnDef="value">
      <th mat-header-cell *matHeaderCellDef>
        Value
      </th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field class="textsize">
          <textarea matInput [(ngModel)]="element.value" [ngModelOptions]="{standalone: true}"
            mdTextareaAutosize minRows="3" style="height: 50px;">
</textarea>
        </mat-form-field>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumnsDns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsDns;let i = index"></tr>
  </table>

TS

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatTableDataSource } from '@angular/material/table';

import { environment } from '../../../../../environments/environment';
import {UserService } from './../../../../core/auth/';
import { ToastrService } from 'ngx-toastr';
import { TranslateService } from '@ngx-translate/core';
import {
  SysuserModel,
  SysusersDataSource,
  SysusersPageRequested,
  OneSysuserDeleted,
  ManySysusersDeleted,
  SysusersStatusUpdated,
  selectSysusersPageLastQuery,
  CustomerModel,
} from '../../../../core/e-commerce';

let coreUrl = environment.coreUrl;
let commonUrl = environment.commonUrl;
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
@Component({
  selector: 'kt-domainsetup',
  templateUrl: './domainsetup.component.html',
  styleUrls: ['./domainsetup.component.scss']
})

export class DomainsetupComponent implements OnInit {
  domainid:string;
  domainname:string;
  public displayedColumnsDns: any = [];
  dataSource: SysusersDataSource;
  dataSourceDns = new MatTableDataSource();
  showdomaindetails:boolean = false;

  constructor(private activeroute: ActivatedRoute,private userService: UserService, private router: Router,
    private toastr: ToastrService,    private translate: TranslateService,


    ) { }

  ngOnInit() {
    this.tabellist();
    this.initDomainForm();
    this.displayedColumnsDns = ['verify', 'type', 'host', 'value']
    this.domainname = this.activeroute.snapshot.paramMap.get("domainName");



  }
 
  tabellist(){
    this.domainid = this.activeroute.snapshot.paramMap.get("domainid");
    this.domainname = this.activeroute.snapshot.paramMap.get("domainName");
   
    this.initDomainForm();
    this.displayedColumnsDns = ['verify', 'type', 'host', 'value'];
    let sendparam = {
      domainId: this.domainid
    }
    let urls = coreUrl + '/domain/dns';
    this.userService.tagdropdown(urls, sendparam).subscribe(data => {
      this.dataSourceDns = data.result;
      console.log(this.dataSourceDns);
      this.showdomaindetails = true;
    })
  }

Plz check this and guide me,in console values are showing in dataSourceDns but it is not displaying in table.i am new to angular guide me