要解决Angular 9 ngx tabs中动态选项卡在鼠标点击之前不可见的问题，可以按照以下步骤进行操作：

1. 首先，在你的组件文件中引入所需的模块和服务：

import { Component, OnInit } from '@angular/core';
import { TabDirective } from 'ngx-bootstrap/tabs';

2. 在你的组件类中定义一个变量来存储选项卡的数据：

tabs: any[] = [];

3. 在ngOnInit()生命周期钩子函数中初始化选项卡数据：

ngOnInit() {
  this.tabs = [
    { title: 'Tab 1', content: 'Tab content 1' },
    { title: 'Tab 2', content: 'Tab content 2' },
    { title: 'Tab 3', content: 'Tab content 3' }
  ];
}

4. 在HTML模板中使用ngx-bootstrap的tabs组件来显示选项卡：

  {{ tab.content }}

5. 使用CSS样式来控制选项卡在鼠标点击之前的可见性。可以在组件的CSS文件中添加以下样式：

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

这样，选项卡在鼠标点击之前将会隐藏，当点击选项卡时，相应的内容将会显示出来。

希望以上解决方法可以帮助到你！