我正在做一个可以让用户填写学生详细信息的项目,这是一个编辑按钮,它将在输入区域中显示学生详细信息。

我的项目中有两个 routerlink = Add student , Student List

当我单击学生列表中的编辑按钮时,我希望项目重定向到添加学生页面,但我不能这样做。

Github 中的项目文件夹

这是添加学生页面

这是学生名单

应用模块.html

<html><h1>{{title}}</h1>

<nav>
  <a class="link" routerLink="/write" routerLinkActive="active">Add Student</a>
  <a class="link" routerLink="/read" routerLinkActive="active">Student List</a>
</nav>

<router-outlet></router-outlet>
</html>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WriteComponent } from './write/write.component'
import { ReadComponent } from './read/read.component';

const routes: Routes = [
  {path:"write",component:WriteComponent},
  {path:"read",component:ReadComponent},
  {path:'index',component:ReadComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [ WriteComponent,ReadComponent]

read.component.html //学生名单页面

 <div class="user-list" *ngIf="usersList && usersList.length" >
    <h2>List of Student</h2>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>SL.No</th>
            <th>Name</th>
            <th>Age</th>
            <th>College</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
            <tr  *ngFor="let user of usersList; let i = index" >
                <th>{{i}}</th>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.college}}</td>
                <td>
                    <button style="margin-right: 5px;" class="btn-warning" (click)="onSelect(i)" (click)="editStudent(i)">Edit</button>
                    <a [routerLink]="['/write']"></a>
                    <button class="btn-danger" (click)="deleteStudent(i)">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
  </div>

读取组件.ts

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { ActivatedRoute , Router, ParamMap} from '@angular/router';


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


public index;
  constructor(private route : ActivatedRoute, private router : Router) { }

  user: User;
  usersList: User[] = [
   {name:"Johnny",age:'22',college:"INTI"},
   {name:"Samantha",age:'26',college:"Harvard"},
   {name:"Zoe",age:'21',college:"TARUC"},
    {name:"Chris",age:'25',college:"Sunway"},

  ]



  ngOnInit(): void {
   this.resetForm();

   this.route.paramMap.subscribe((params:ParamMap) => {
   let Index = parseInt(this.route.snapshot.paramMap.get('index'));
    this.index = Index;
   });

  }
  editStudent(index: number) {
    this.user = this.usersList[index];
    this.deleteStudent(index);
  }

  deleteStudent(index: number) {
    this.usersList.splice(index, 1);
  }
  resetForm() {
    this.user = {age: null, name: '', college: ''};
   }

onSelect(index : number){
  this.router.navigate(['/user',index])
}

}
interface User {
  name: string;
  age: string;
  college: string;
 }

write.component.html //添加学生页面,列表一样我就不在这里发了,不然代码太多了

<div class="container">
  <h2>Add Student</h2>
  <form class="form-inline" autocomplete="off" (submit)="addStudent()">
      <div class="form-group">
        <label for="email">Name:</label>
        <input type="text" class="form-control" id="name" name="name" [(ngModel)]="user.name"  >
      </div>
      <div class="form-group">
        <label for="pwd">Age:</label>
        <input type="number" class="form-control" id="age" name="age" [(ngModel)]="user.age">
      </div>
      <div class="form-group">
          <label for="pwd">College:</label>
          <input type="text" class="form-control" id="college" name="college" [(ngModel)]="user.college">
        </div>
      <button type="submit" class="btn-success">Submit</button>

    </form>


写.component.ts

ngOnInit(): void {
   this.resetForm();
  }

  addStudent() {
   this.usersList.push(this.user);
   this.resetForm();
  }

 resetForm() {
   this.user = {age: null, name: '', college: ''};
  }

#1楼 票数:0

  // read.component.html
  <button style="margin-right: 5px;" class="btn-warning" (click)="editStudent(i)">Edit</button>
  // read.component.ts 
  editStudent(index: number) {
        this.user = this.usersList[index];
        this.deleteStudent(index);
        this.router.navigateByUrl('/write');
      }

#2楼 票数:0

在 read.component.html 文件中<a [routerLink]="['/write']"></a>将不起作用,因为您没有在其中添加任何文本,因此它不会显示在网络中,而不是,你可以在

editStudent(index: number) {
    this.user = this.usersList[index];
    this.deleteStudent(index);
    this.router.navigate(['/write']);
  }

  ask by LJ27 translate from so

未解决问题?本站智能推荐:

1回复

我的路由器链接没有以角度重定向

我正在尝试制作一个取消按钮,该按钮在单击时将重定向到主页,但是当我在本地主机中单击它时,除了 URL 获取 /welcome 之外没有任何反应,但没有将我重定向到我想要的位置。 HTML app-routing.module.ts
1回复

Angular路由器:如何根据路由器链接的一部分重定向到组件

在我的 Angular 应用中我有这个路由文件: 我不想通过重定向,当路由:会是这样的: 它不会重定向我,而只是加载组件ResetPassword并保持 url 原样建议?
1回复

Angular9无法识别的表达式路由器链接

我正在构建一个 Angular 9 应用程序,我面临两个问题。 1) 当我从导航栏更改路由时,尽管路由已成功更改,但我在控制台中收到有关无法识别的表达式的错误,如下所示。 我尝试了各种方法来解决它,但到目前为止都失败了。 语法错误,无法识别的表达式:/about 2) 我的登陆页面上的 h1
1回复

如何强制路由器在Angular2中更新当前路由?

我有一个角度为2的home组件和一个nav面板组件。当用户单击nav面板(侧栏)上的注销时,通过将路由器登录到控制台将当前URL正确报告为“ / login”。 当用户再次登录时,导航面板中的路由器实例将当前路由报告为“ / login”,当用户登录后,路由器应将其带到主页。 结果,用户将永
1回复

Angular路由器对Cognito重定向没有反应?

当我们通过 AWS Cognito 使用社交登录时,Cognito 会向浏览器发送重定向以转到signin redirect URL 后登录。 在这种情况下,配置的 URL 是http://localhost:4200/home/ 。 当应用程序收到此重定向时,它会转到http://localhos
1回复

如何在Angular4中使用路由器URL通配符?

我想为每个具有/ admin的路由或具有此类URL / admin / dashboard,/ admin / users,/ admin / tasks等的路由显示我的标头组件 app.component.html 但是上面的代码仅接受/ admin。 您知道如何添加通配符,以便它接
1回复

Angular2-如何为特定的div实现路由器动画?

我这里有一个div列表,我想在单击时滑动一个特定元素。 当前,所有元素都在滑动,因为状态是所有元素的单个变量。 html的 .TS
2回复

将标题绑定到基于路由器URL的文本(Angular4)

使标题文本根据页面更改的最佳方法是什么? 我目前正在使用一个根据router.url更改颜色的单个标头(请参见此处的上一个问题),并且我想动态更改页面标头的文本。 我觉得逻辑也应该相似,如果我也想基于页面添加图像。 起初,我想遍历一系列标题,但最终只在所有页面上打印了所有标题。 然后