Question

我真的需要一些帮助。我正在这个项目上使用Ionic Framework。

现在，所有显示的数据都在接口“列表”中，该接口包括以下ts文件。

export interface list {
    name: string,
    color: string
}

我想用每个列表的颜色值的颜色创建一个图标。到目前为止，我已经使用在线教程编写了以下打字稿。我不知道它是否有意义，但我知道的是它不起作用。

（代码顺序->第1个：TS；第2个：SCSS；第3个：HTML）

import { Component } from '@angular/core';
import { NavController, PopoverController } from 'ionic-angular';
import { AddListPage } from '../add-list/add-list';

//Firebase imports
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

//Observable
import { Observable } from 'rxjs';
import { list } from '../../models/list.interface';
import { PopoverPage } from '../popover/popover';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  list = {} as list;
  listRef: Observable<any[]>;
  listReff: Observable<any>;
  
  constructor(public navCtrl: NavController,
    private afAuth: AngularFireAuth,
    private db: AngularFireDatabase,
    public popoverCtrl: PopoverController) {
  }

  ionViewWillLoad(){
    this.afAuth.authState.subscribe(data => {
        this.listRef = this.db.list(data.uid+'/lists').valueChanges();
        this.listReff = this.db.object(data.uid+'/lists/color').valueChanges();
        const color = String(this.listReff);
        document.documentElement.style.setProperty('--bg', color);
    })
    console.log(this.listRef);

  }
}

page-home {
    :root {
        --bg: red;
    }
    
    ion-card{
        ion-icon{
        background: var(--bg);
        }
    }
}

<ion-content padding>

  <ion-grid>
  <ion-row>
      <ion-col *ngFor = "let list of listRef | async">
      <ion-card>
        <ion-icon name="planet"></ion-icon>
      <p>{{list?.name}}</p>
      <p>{{list?.color}}</p>
      </ion-card>
    </ion-col>            
  </ion-row>
 </ion-grid>

</ion-content>

任何帮助将不胜感激！

如何将Firebase值设置为CSS属性？

0 个答案: