angular|大地老师第四节 angular组件合成完整

只看视频印象不深 只有记录下来才能记得更久~

一，引入图片

        之前介绍到的src中有一个静态资源文件夹：assets

        在这里新建一个images的文件夹来存放用到的图片，然后在xxx.component.html中填入

<!-- 第一种 -->
    //网络和静态资源都可
    <img src="assets/images/1.jpg" alt="图片">
    //或者
    <img src="https://i.loli.net/2021/09/22/16uNXCVrtzR7WDI.jpg" alt="图片">

        或从ts页面引入

//html页面
    <img [src]="picUrl" alt="引用">

//ts页面
    //export class HomeComponent implements OnInit中填写
    //网络和本地资源都可
    public picUrl = "https://i.loli.net/2021/09/22/16uNXCVrtzR7WDI.jpg" 
    //或者
    public picUrl = "assets/images/1.jpg"

 

二，循环数据 显示数据的索引（key）

        在循环数据的基础上添加以下代码再引用即可

let key = index"

        示例：

//html页面

    <h1>循环数据 显示数据的索引（key）</h1>

        <ul>
            <li *ngFor="let item of list;let key = index">
                {
  {key}}---{
  {item.title}}
            </li>
        </ul>

//ts页面

    public list:any[] = [
        {    
          "title":"新闻1"
        },
        {
          "title":"新闻2"
        },
        {
          "title":"新闻3"
        }
      ];

 

三，条件判断语句 *ngif

        ngif可以通过Boolean类型更改显示的图片 如下示例：

//html页面

    <h1>条件判断语句 *ngif</h1>

        //若flag为true则显示1.jpg
        <div *ngIf="flag">
            <img src="assets/images/1.jpg" alt="">
        </div>

        //若flag为false则显示调用ts页面的图片
        <div *ngIf="!flag">