小编Hee*_*ena的帖子

尝试使用角材料在角2中实现简单的应用。
我用分页实现了一个简单的表。

我也使用了mat-select组件，但是为此，我想实现一个搜索过滤器来键入并从列表中搜索所需的选项。

下面显示的是我的.html文件

<table>
 <tr><td> Department</td>
<td>
  <mat-form-field>
  <mat-select placeholder=" ">
    <mat-option> </mat-option>
    <mat-option *ngFor="let dep of dept" [value]="dep">{{dep}}</mat-option>
  </mat-select>
</mat-form-field><br/>
</td>
</tr>


</table>

<br><br>

<button >Search</button>

<button >Reset</button>

<button >Close</button>


<mat-card>
<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Account No. Column -->
    <ng-container matColumnDef="accno">
      <mat-header-cell *matHeaderCellDef> Account No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.accno}} </mat-cell>
    </ng-container>

    <!-- Account Description Column -->
    <ng-container matColumnDef="accdesc">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.accdesc}} </mat-cell>
    </ng-container>

    <!-- Investigator Column …

我正在尝试mat-table使用输入总结在列中输入的值。

我创建了一个包含 3 列的表：Account Id,Account Description和Value。我也创造了资产JSON文件文件夹的价值观acc_id和acc_desc。

然后我在我的表中为相应的列访问这些值。

我还创建了一个已Value为其分配输入字段的列。

在桌子旁边，我使用了一个带有两个图块的简单网格，我想在其中计算Value列中输入的所有值的总和。

account.component.html

<!-- Table starts here -->

<mat-card>
<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="acc_id">
      <mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
    </ng-container>

    <!-- Account Description Column -->
    <ng-container matColumnDef="acc_des">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_des }} </mat-cell>
    </ng-container>

        <!-- Value Column -->
    <ng-container matColumnDef="value">
      <mat-header-cell *matHeaderCellDef> …

我是角度2的新手并且正在研究Typescript,以便在角度2中构建简单的应用程序.

我发现我们可以使用类和脚本的类,接口,模块等来构建应用程序.

但据我研究javascript我知道javascript不支持类,接口,模块等.

下面是我在学习期间遇到的一些概念.

接口

接口用于类型检查对象是否适合某个结构.通过定义一个接口,我们可以命名一个特定的变量组合,确保它们总是在一起.

"当翻译成JavaScript时,界面消失了 - 它们唯一的目的是帮助开发阶段." 在下面的例子中,我们定义了一个简单的接口来检查函数的参数:

"属性的顺序并不重要.我们只需要存在所需的属性并且是正确的类型.如果缺少某些内容,类型错误或命名不同,编译器将警告我们."

类

在构建大型应用程序时,面向对象的编程风格是许多开发人员的首选.

TypeScript提供了一个类系统,包括继承,抽象类,接口实现,setter/getter等."

这是一堂课

模块

模块可以导出任意数量的函数,类或变量.默认情况下,对象以其原始名称导出.如果需要,我们可以改变它.模块也可以具有默认导出成员.

以下代码段显示了不同导出语句的示例:

由于打字稿被编译成javascript,这些类,接口,模块等是如何被发生的？

我正在使用 Angular 2 应用程序使用 Angular 材料和 Angular Flex 布局。我在我的应用程序中创建了一个登录表单和一个标题，该标题仅在我的主页登录后可见。

在我的 app.component.html 中，我添加了标题并应用了以下样式以在滚动时修复它。

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">

在我的主页中，我添加了mat-toolbar组件、mat-card组件和mat-sidenav组件。

登录应用程序后，当我滚动时，主页内容与我的固定标题重叠，并且我的标题被主页内容覆盖。

请在此处访问我的示例应用程序

有人可以帮助我正确实施我的固定标头吗？

我试图使用角度材料选择表在角度2中实现一个简单的表格.

我用一个按钮从表中删除选定的行.但是点击按钮我怎么能删除行？

下面显示的是我的表格的html文件

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
      <mat-header-cell  style="max-width: 100px;" *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </mat-header-cell>
      <mat-cell   style="max-width: 100px;" *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </mat-cell>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="num">
      <mat-header-cell style="max-width: 100px;" *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell style="max-width: 100px;" *matCellDef="let element"> {{element.num}} </mat-cell>
    </ng-container>

    <!-- Message Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Message </mat-header-cell>
      <mat-cell …

我正在尝试使用 angular material 和 flex css 在 angular 2 中创建一个简单的布局。

下面是我的代码...

<div  class="background" >

<mat-toolbar fxLayout="row"   fxLayoutAlign="space-between  none" >

<div  fxLayout="column" > 
<p>SPACE STUDY</p>
<h6>Rockefeller FY 2018</h6>

<div  fxShow="true" fxHide.gt-sm="true" fxLayout="column" fxLayoutAlign="start none">

 <h6 [matMenuTriggerFor]="dashboarditems">
  <mat-icon style="transform: scale(1.2);">line_weight</mat-icon> </h6>

  <mat-menu  class="mat-menu-panel"  [overlapTrigger]="true" #dashboarditems="matMenu"><br/><br/>
<a  routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></a><br/><br/><br/>

<a  >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></a><br/><br/><br/>

<a  >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></a><br/><br/><br/>
  </mat-menu>
</div> …

我使用有角度的材料 mat-table 组件创建了一个简单的有角度的表格。

默认情况下，行之间有一个分隔线。我想在列之间添加一个垂直分隔线。

谁能告诉我如何添加 css 属性来实现列之间的垂直分隔线。

下面显示的是我的代码

account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<!-- Table starts here -->


<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="acc_id">
      <mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
    </ng-container>

      <!-- Account Description Column -->
    <ng-container matColumnDef="acc_desc">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_desc}}</mat-cell>
       </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns1;"> </mat-row>
  </mat-table>


  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>

account.component.scss

.example-container {
  display: flex; …

我是 Flex 布局的新手，刚刚开始研究如何在 Flex 布局中使用有角度的材料。

我已经使用 angular 材料在 angular 2 中实现了一个简单的登录表单。我想使用带有角度材料的 flex 布局。

我使用了 mat-card，我在其中对齐了表单元素。但我想将 mat-card 放置在我的窗口中央。

这是我的代码

myform.component.html

<div fxlayout="column" style="background: white;">

<mat-card fxFlex>   
            <form  (ngSubmit)="onSubmit(user.username,user.password)" #myForm="ngForm">

                                <p style="font-size: 30x;">Space Study</p>
                                <p style="font-size: 14px;">Sign In</p>
                                <mat-input-container class="form-row">
                                    <span matTooltip="Username">
                                        <input matInput placeholder=" " id="username" [(ngModel)]="user.username" name="username">
                                    </span>
                                    <span matPrefix><mat-icon>person&nbsp;&nbsp;</mat-icon></span>
                                </mat-input-container>

                                <mat-input-container class="form-row">
                                    <span matTooltip="Password">
                                        <input matInput placeholder=" " id="password" [(ngModel)]="user.password" name="gpassword" [type]="hide ? 'password' : 'text'">
                                    </span>
                                    <span matPrefix><mat-icon>remove_red_eye&nbsp;&nbsp;</mat-icon></span>
                                </mat-input-container>

                    <button mat-raised-button color="primary" type="submit" mat-raised-button>Login</button>

                    <mat-progress-bar mode="indeterminate" *ngIf="showprogressbar"></mat-progress-bar>
            </form> …

我创建了一个 angular 应用程序，其中有一个登录表单，我在其中使用 service 和 guard 实现了身份验证。

我用用户名和密码定义了一个接口用户。在authentication.service.ts 中使用这个接口我定义了两个用户admin和user。

我还实现了一个名为authentication.guard.ts的守卫，我在其中使用CanActivate RouteGaurd 将用户路由到他可以访问的页面。

在我的应用程序中有一个只能由管理员用户访问的管理页面，因此如果管理员仅登录，它就会导航到管理页面。如果用户登录，那么他将被重定向到主页，跳过管理页面

当管理员 或用户登录应用程序时，会出现一个菜单栏，其中我有三个菜单项Home、AdminActivity、RegisterUser。

如果管理员登录应用程序，我试图隐藏AdminActivity菜单项，如果用户登录应用程序，则隐藏RegisterUser菜单项。